onsenUIを使った　スライダーから値を取得したい

前提・実現したいこと

Monaca上でアプリを作ろうとしています。
Onsen UIの機能の一つである ons-range を使って、
スライダーを操作したときの、スライダーの値を取得したいと考えています。
Arduino と通信させて、ＬＥＤの調光操作をできればと考えています。
Lチカまでは出来ました

発生している問題・エラーメッセージ

スライダーを付ける事は出来たのですが、
スライダーの現在の位置から値を取得しようと試みましたが、できませんでした
onsenUIのrangeの説明ページに書いてあったコードですが、これをどの部分にいれればいいのかがわかりませんでした
※参考ＵＲＬ　　　https://ja.onsen.io/v2/api/js/ons-range.html

var range = document.getElementById('range-1');
ons.notification.alert('Value is ' + range.value);

該当のソースコード　（作成途中ですが・・・。）

Monaca
1<!DOCTYPE HTML>
2<html>
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7    <script src="components/loader.js"></script>
8    <link rel="stylesheet" href="components/loader.css">
9    <link rel="stylesheet" href="css/style.css">
10    <script>
11//ここからはデバッグ用の関数部分　変数の中身を確認するための関数
12ons.bootstrap();
13ons.ready(function(){
14    var log = function(message){
15        if (typeof message == "object") message = JSON.stringify(message);
16        $("#log").append(message + "<br />");
17    };
18    setInterval(function(){
19        ble.scan([],5, function(device){
20            if (device.name === "RN363A") {
21                ble.connect(device.id,function(device){
22                   $("#led1").change(function(){
23                    var led1 = $("#led1").prop("checked") ? 1 : 0;   
24                    ble.write(device.id,"D8FB2E3A-E180-49E5-98EC-0596B05F5DF2","F8C75AF6-4AAA-11E8-842F-0ED5F89F718B",new Uint8Array([led1]).buffer);                             
25                    });
26                    
27            });
28           }
29        });
30    },3000); 
31  });
32    </script>
33</head>
34<body>
35<!--  この部分は変数の中身確認用の出力エリア-->
36    <br />
37<ons-page>
38  <ons-toolbar>
39    <div class="center">Switches</div>
40  </ons-toolbar>
41
42  <ons-list>
43    <ons-list-header>Settings</ons-list-header>
44    <ons-list-item>
45      <div class="center">
46        LED 1
47      </div>
48      <div class="right">
49        <ons-switch id ="led1"></ons-switch>
50      </div>
51    </ons-list-item>
52   <!--ここからスライダー部分-->
53   <ons-list-item>
54        <ons-row>
55      <ons-col width="40px" style="text-align: center; line-height: 31px;">
56        <ons-icon icon="fa-lightbulb"></ons-icon>
57      </ons-col>
58      <ons-col>
59        <ons-range id ="led1-range" style="width: 100%;" value="25"></ons-range>
60      </ons-col>
61      <ons-col width="40px" style="text-align: center; line-height: 31px;">
62        <ons-icon icon="fa-twitter"></ons-icon>
63      </ons-col>
64    </ons-row>
65    </ons-list-item>
66       <ons-list-item>
67      <div class="center">
68        LED 2
69      </div>
70      <div class="right">
71        <ons-switch id ="led2"></ons-switch>
72      </div>
73    </ons-list-item>
74    <ons-list-item>
75        <ons-row>
76      <ons-col width="40px" style="text-align: center; line-height: 31px;">
77        <ons-icon icon="fa-lightbulb"></ons-icon>
78      </ons-col>
79      <ons-col>
80        <ons-range style="width: 100%;" value="25"></ons-range>
81      </ons-col>
82      <ons-col width="40px" style="text-align: center; line-height: 31px;">
83        <ons-icon icon="fa-twitter"></ons-icon>
84      </ons-col>
85    </ons-row>
86    </ons-list-item>
87  </ons-list>
88</ons-page>
89</body>
90</html>
91

試したこと

<body>部分に、onsenUIのrange説明ページに書かれてあったコードをいれたり、してみましたが駄目でした

行動規範の内容に同意します

回答2件

Led2こんな感じで取れるかと思います(monaca環境で確認)
(id="led2range"定義&Javascript部分調整)

index.html
1<!DOCTYPE HTML>
2<html>
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7    <script src="components/loader.js"></script>
8    <link rel="stylesheet" href="components/loader.css">
9    <link rel="stylesheet" href="css/style.css">
10    <script>
11//ここからはデバッグ用の関数部分　変数の中身を確認するための関数
12ons.ready(function(){
13    setInterval(function(){
14      var led2 = $("#led2range > .range__input");
15      console.log(led2.prop('value'));
16    },3000); 
17  });
18    </script>
19</head>
20<body>
21<!--  この部分は変数の中身確認用の出力エリア-->
22    <br />
23<ons-page>
24  <ons-toolbar>
25    <div class="center">Switches</div>
26  </ons-toolbar>
27
28  <ons-list>
29    <ons-list-header>Settings</ons-list-header>
30    <ons-list-item>
31      <div class="center">
32        LED 1
33      </div>
34      <div class="right">
35        <ons-switch id ="led1"></ons-switch>
36      </div>
37    </ons-list-item>
38   <!--ここからスライダー部分-->
39   <ons-list-item>
40        <ons-row>
41      <ons-col width="40px" style="text-align: center; line-height: 31px;">
42        <ons-icon icon="fa-lightbulb"></ons-icon>
43      </ons-col>
44      <ons-col>
45        <ons-range id ="led1-range" style="width: 100%;" value="25"></ons-range>
46      </ons-col>
47      <ons-col width="40px" style="text-align: center; line-height: 31px;">
48        <ons-icon icon="fa-twitter"></ons-icon>
49      </ons-col>
50    </ons-row>
51    </ons-list-item>
52       <ons-list-item>
53      <div class="center">
54        LED 2
55      </div>
56      <div class="right">
57        <ons-switch id ="led2"></ons-switch>
58      </div>
59    </ons-list-item>
60    <ons-list-item>
61        <ons-row>
62      <ons-col width="40px" style="text-align: center; line-height: 31px;">
63        <ons-icon icon="fa-lightbulb"></ons-icon>
64      </ons-col>
65      <ons-col>
66        <ons-range style="width: 100%;" value="25" id="led2range"></ons-range>
67      </ons-col>
68      <ons-col width="40px" style="text-align: center; line-height: 31px;">
69        <ons-icon icon="fa-twitter"></ons-icon>
70      </ons-col>
71    </ons-row>
72    </ons-list-item>
73  </ons-list>
74</ons-page>
75</body>
76</html>

投稿2018/05/02 11:03

rururu3

総合スコア5545

fuji0130

2018/05/03 04:05

ご回答いただきまして、誠にありがとうございます教えて頂いたものをmonacaに組み込み、スライダーの現在位置を画面に数字で表示させようとしたのですが、 <div id = "led2"></div>　と書いたのですがうまくいきませんでした何か書き方がありましたら教えて頂けるとありがたいです

fuji0130

2018/05/03 04:06

自分で新たに調べてみた結果、 <input type="range" value="1" min="1" max="10" step="1" oninput="document.getElementById('output1').value=this.value"> <output id="output1"></output> のように＜body>部分に書いた所、一応はできるようになったのですが、 onsenuiを使った方法も知りたいなと思っています

fuji0130

2018/05/27 04:19

もうしばらくたったので見て頂けないかもしれませんが、ダメもとで質問させてくださいあれからしばらく別にやらなければいけない事があり、最近ようやく再開できたのですが、 console.log？が動いていないのか値を取得できているのかどうかがわかりません教えて頂いた内容をそのままmonacaでビルドして、実行しましたが駄目でした何がいけないのかが自分ではわかりません教えて頂けないでしょうか？？何卒宜しくお願い致します

fuji0130

2018/05/27 04:19

consolelogpluginというのも入れてみましたが駄目でした

rururu3

2018/05/28 09:49

ChromeブラウザのF12ボタン表示時に出てくるchrome developer toolsで出てくるのは確認してます。

退会済みユーザー

2018/05/30 00:59

下記サンプルページのons-range部分を参考に値を取得していました。私はAngular1の勉強を多少した後ではないと理解ができなかったです。 https://ja.onsen.io/playground/?framework=angular1&category=getting%20started&module=data%20binding

fuji0130

2018/05/30 22:12

rururu3　様回答有難うございます調べて少し触ってみました watchという所で変数を見れると書いてあったのを見たのですがどこ見たらいいかわからないままで rururu3様の教えて下さった内容が理解できませんでした・・・ tsuno_ai　様とてもわかりやすいサンプルを教えて頂きありがとうございます一度、試してみようと思いますありがとうございました

行動規範の内容に同意します

自己解決

OnsenUIで設定したスライダーから値を表示する事ができました
ご教示下さった皆様、ありがとうございました
解決方法はこちらになります
led2スイッチの動作部分の中に下記内容を書き込んで、
androidのデバッガーで操作した際に数字が画面に表示されるのを確認してＯＫとなりました

var range = document.getElementById('led2range');
ons.notification.alert('Value is ' + range.value);
var led2 = document.getElementById('led2range').value;

投稿2018/05/31 23:28

fuji0130

総合スコア7