javascript - 带标签的垂直范围 slider

Question

想要制作带标签的垂直范围 slider 。

已修改 - https://rangeslider.js.org/

它显示了没有标签的基于垂直方向的 slider 。

“带标签的预期 slider ”

我尝试过的任何替代方法都修改了这个库，但它无法生成标签。

Answer 1

为什么不用这个插件？我添加了一些 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>