带标签的垂直范围滑块

Question

Want to produce vertical range slider with label.

Modified - https://rangeslider.js.org/

It shows vertical orientation based slider without label.

"Expected Slider with Label"

Any alternative as I have try modified this library but it couldn't produce label.

Answer 1

Why not use this plugin? I added some html + css ;)

 $(function() { let $document = $(document); let selector = '[data-rangeslider]'; let $element = $(selector); // For ie8 support let textContent = ('textContent' in document) ? 'textContent' : 'innerText'; // Example functionality to demonstrate a value feedback function valueOutput(element) { let value = element.value; let output = element.parentNode.getElementsByTagName('output')[0] || element.parentNode.parentNode.getElementsByTagName('output')[0]; output[textContent] = value; } $document.on('input', 'input[type="range"], ' + selector, function(e) { valueOutput(e.target); }); // Example functionality to demonstrate disabled functionality $document.on('click', '#js-example-disabled button[data-behaviour="toggle"]', function(e) { let $inputRange = $(selector, e.target.parentNode); if ($inputRange[0].disabled) { $inputRange.prop('disabled', false); } else { $inputRange.prop('disabled', true); } $inputRange.rangeslider('update'); }); // Example functionality to demonstrate programmatic value changes $document.on('click', '#js-example-change-value button', function(e) { let $inputRange = $(selector, e.target.parentNode); let value = $('input[type="number"]', e.target.parentNode)[0].value; $inputRange.val(value).change(); }); // Example functionality to demonstrate programmatic attribute changes $document.on('click', '#js-example-change-attributes button', function(e) { let $inputRange = $(selector, e.target.parentNode); let attributes = { min: $('input[name="min"]', e.target.parentNode)[0].value, max: $('input[name="max"]', e.target.parentNode)[0].value, step: $('input[name="step"]', e.target.parentNode)[0].value }; $inputRange.attr(attributes); $inputRange.rangeslider('update', true); }); // Example functionality to demonstrate destroy functionality $document .on('click', '#js-example-destroy button[data-behaviour="destroy"]', function(e) { $(selector, e.target.parentNode).rangeslider('destroy'); }) .on('click', '#js-example-destroy button[data-behaviour="initialize"]', function(e) { $(selector, e.target.parentNode).rangeslider({ polyfill: false }); }); // Example functionality to test initialisation on hidden elements $document .on('click', '#js-example-hidden button[data-behaviour="toggle"]', function(e) { let $container = $(e.target.previousElementSibling); $container.toggle(); }); // Basic rangeslider initialization $element.rangeslider({ // Deactivate the feature detection polyfill: false, // Callback function onInit() { valueOutput(this.$element[0]); }, // Callback function onSlide(position, value) { console.log('onSlide'); console.log('position: ' + position, 'value: ' + value); }, // Callback function onSlideEnd(position, value) { console.log('onSlideEnd'); console.log('position: ' + position, 'value: ' + value); } }); });

 *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { color: #404040; font-family: Helvetica, arial, sans-serif; } body { padding: 50px 20px; margin: 0 auto; max-width: 800px; } output { display: block; font-size: 30px; font-weight: bold; text-align: center; margin: 30px 0; width: 100%; } .container { width: 200px; margin: auto; } .u-left { float: left; } .u-cf:before, .u-cf:after { content: ""; display: table; } .u-cf:after { clear: both; } .u-text-left { text-align: left; } .label { position: relative; font-weight: 700; } .label-center { position: absolute; display: flex; flex-direction: column; justify-content: space-between; align-items: center; top: 5%; left: -50px; height: 90%; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.min.css" rel="stylesheet" /> <div class="container"> <h2><code>data-orientation="vertical"</code></h2> <div class="label u-left" style="height: 200px"> <input type="range" step="25" min="0" max="100" data-rangeslider data-orientation="vertical"> <div class="label-center"> <div>100</div> <div>75</div> <div>50</div> <div>25</div> <div>0</div> </div> </div> <output class="u-text-left"></output> </div>