1

我已经想出了如何调整我的工具提示和自定义我的滑块，但我现在正在尝试使用文本输入来显示最小值和最大值的值，然后可以使用用户的输入进行更新。由于网上没有类似的东西，我不知道从哪里开始。

我尝试过使用文本框，但我不知道它如何与 jQuery 一起使用。

它应该根据任何输入更新滑块，并且无论是min-value还是，值都应该始终更改max-value。

(function($) {
  $(document).ready(function() {
    $('.input-range').each(function() {
      var value = $(this).attr('data-slider-value');
      var separator = value.indexOf(',');

      if (separator !== -1) {
        value = value.split(',');
        value.forEach(function(item, i, arr) {
          arr[i] = parseFloat(item);
        });
      } else {
        value = parseFloat(value);
      }

      $(this).slider({
        formatter: function(value) {
          console.log(value);
          return '$ ' + value + ' cm';
        },
        min: parseFloat($(this).attr('data-slider-min')),
        max: parseFloat($(this).attr('data-slider-max')),
        range: $(this).attr('data-slider-range'),
        value: value,
        tooltip_split: $(this).attr('data-slider-tooltip_split'),
        tooltip: $(this).attr('data-slider-tooltip')
      });
    });
  });
})(jQuery);
.container {
  margin-top: 20px;
}

.slider-selection {
  background: #198294 !important;
}

.slider-track-high {
  background: #D9D9D6 !important;
}

.slider-track-low {
  background: #D9D9D6 !important;
}

.slider.slider-horizontal {
  width: 100% !important;
  height: 6px;
}

.slider-handle {
  background-color: #fff !important;
  background-image: none !important;
  width: 24px;
  height: 24px;
  border: 20px solid #198294;
  box-sizing: border-box;
}

.slider .tooltip.top {
  margin-top: -45px !important;
  margin-left: 2px;
}

.slider .tooltip-inner {
  white-space: nowrap;
  background-color: white;
  color: #747679;
  font-family: TT Norms;
  border: 1px solid #198294;
  border-radius: 0px;
}

.slider .tooltip.top .tooltip-arrow {
  border-top-color: #198294 !important;
}

.well {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 100% !important;
  padding: 0;
}

.slider-ghost .slider-track {
  height: 6px !important;
}

.slider-ghost .slider-handle {
  top: -5px !important;
  width: 24px;
  height: 24px;
  border: 2px solid #198294;
  box-sizing: border-box;
}

.slider-primary.slider-ghost .slider-handle {
  border-color: #198294;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="range.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.0/css/bootstrap-slider.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.0/bootstrap-slider.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/fd9dba5260.js"></script>

<div class="container">
  <div class="row">
    <div class="col-md-6" style="margin-top: 75px;">
      <div class="slider-wrapper slider-primary slider-strips slider-ghost">
        <input class="input-range" type="text" data-slider-step="1" data-slider-value="14, 75" data-slider-min="0" data-slider-max="100" data-slider-range="true" data-slider-tooltip_split="true" data-slider-tooltip="hide" />
      </div>
    </div>
  </div>
</div>

4

0 回答 0