CellCheck/Slider test.html at master · juanfparra12/CellCheck · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://www.cise.ufl.edu/~abh/css/nouislider.min.css" >
</head>
<body>
  <script src="https://www.cise.ufl.edu/~abh/css/nouislider.min.js"></script>
  <div id="slider-snap" style="margin-top:100px;"></div>
  </br>
  <div id="slider-snap-value-lower"></div>
  <div id="slider-snap-value-upper" align="right"></div>


  <script>
  var snapSlider = document.getElementById('slider-snap');
  noUiSlider.create(snapSlider, {
  	start: [ 0, 500 ],
  	snap: true,
  	connect: true,
  	range: {
  		'min': 0,
  		'10%': 10,
  		'20%': 20,
  		'30%': 30,
  		'40%': 40,
  		'50%': 50,
      '60%': 60,
      '70%': 70,
      '80%': 80,
      '90%': 90,
  		'max': 100
  	}
  });
  var snapValues = [
  	document.getElementById('slider-snap-value-lower'),
  	document.getElementById('slider-snap-value-upper')
  ];
  snapSlider.noUiSlider.on('update', function( values, handle ) {
  	snapValues[handle].innerHTML = values[handle];
  });
  </script>


</body>
</html>