<div id="slider"></div>var slider = document.getElementById('slider');noUiSlider.create(slider, { start: [20, 80], connect: true, range: { 'min': 0, 'max': 100 }});npminstallnouislideryarnaddnouislider// When using a bundler such as Webpack,// include both noUiSlider and its stylesheet.// Either import the default:import noUiSlider from 'nouislider';// Or the namespace:import * as noUiSlider from 'nouislider';import 'nouislider/dist/nouislider.css';// Alternatively, you can include both files:<link href="nouislider.css" rel="stylesheet"><script src="nouislider.js"></script>// You can also use the ES6 module distribution<script type="module">import noUiSlider from 'nouislider/dist/nouislider.mjs';</script>noUiSlider is alightweight range slider with multi-touch support and a ton offeatures. It supports non-linear ranges, requires no external dependencies, has keyboard support, and it works great inresponsive designs. Have you tried this documentation on your phone?
var range = document.getElementById('range');noUiSlider.create(range, { range: { 'min': 1300, 'max': 3250 }, step: 150, // Handles start at ... start: [1450, 2050, 2350, 3000], // ... must be at least 300 apart margin: 300, // ... but no more than 600 limit: 600, // Display colored bars between handles connect: true, // Put '0' at the bottom of the slider direction: 'rtl', orientation: 'vertical', // Move handle on tap, bars are draggable behaviour: 'tap-drag', tooltips: true, format: wNumb({ decimals: 0 }), // Show a scale with the slider pips: { mode: 'steps', stepped: true, density: 4 }});// Give the slider dimensionsrange.style.height = '400px';range.style.margin = '0 auto 30px';var valuesDivs = [ document.getElementById('range-value-1'), document.getElementById('range-value-2'), document.getElementById('range-value-3'), document.getElementById('range-value-4')];var diffDivs = [ document.getElementById('range-diff-1'), document.getElementById('range-diff-2'), document.getElementById('range-diff-3')];// When the slider value changes, update the input and spanrange.noUiSlider.on('update', function (values, handle) { valuesDivs[handle].innerHTML = values[handle]; diffDivs[0].innerHTML = values[1] - values[0]; diffDivs[1].innerHTML = values[2] - values[1]; diffDivs[2].innerHTML = values[3] - values[2];});