JSFiddle - React, Tailwind, and code Playground

by cory a

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.css">
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.js"></script>
<label for="slider1">item 1</label>
<input type="range" class="mtslide" name="slider1" id="slider1" min="0" max="10" value="0">
<label for="slider2">item 2</label>
<input type="range" class="mtslide" name="slider2" id="slider2" min="0" max="10" value="0">
<label for="slider3">item 3</label>
<input type="range" class="mtslide" name="slider3" id="slider3" min="0" max="10" value="0">
<br />
<input type="button" value="slide" id="slidebtn" data-icon="search" />

JavaScript

$("#slidebtn")
     .click(function () {
     slide();
 });

 

 function slide() {
     var count = 0;
     var arr = [];

     $.mobile.activePage.find('[type=number]')
         .each(function () {
         var self = this;
         var obj = {
             code: $(self).attr("name"),
             score: $(self)
                 .val()
         };
         arr.push(obj);
         count += 1;
     });

     alert(JSON.stringify(arr));

 }