javascript - jQuery UI 滑块缺少 BG

Question

我正在使用带有 jQ​​uery UI 的范围滑块，但是当我移动滑块时，背景线不显示，所以很难分辨它在哪里。如何仅突出显示选定部分的背景线？

jsfiddle 在下面。

https://jsfiddle.net/zbmt5qrn/

/* INTEREST RATE SLIDER */
 $("#interestRange").slider({
        min: 0,
        max: 100,
        step: 1,
        values: [10],
        slide: function(event, ui) {
            for (var i = 0; i < ui.values.length; ++i) {
                $("input.interestValue[data-index=" + i + "]").val(ui.values[i]);
            }
        }
    });

  $("input.interestValue").change(function() {
        var $this = $(this);
        $("#interestValue").slider("values", $this.data("index"), $this.val());
    });


function handleInterestChange(input) {
    if (input.value < 0) input.value = 0;
    if (input.value > 24) input.value = 24;
}

var items =[ '8%','24%'];
var oneBig = 100 / (items.length - 1);

$.each(items, function(key,value){
  var w = oneBig;
  if(key === 0 || key === items.length-1)
    w = oneBig/2;

  $("#interestLabel").append("<label style='width: "+w+"%'>"+value+"</laben>");
});

标签： javascriptjqueryslider

Answer 1

我正在删除关于 '8%/24%' 的代码，因为它似乎与这个问题无关。

有几种方法可以设置背景。您可以在其中插入一个新元素#interestRange并根据滑块值更改其宽度。但是如果你不需要担心支持过时的浏览器，使用 apply a linear-gradientto thebackground会容易得多#interestRange。

const sliderMin = 0
const sliderMax = 100
const sliderDefaultValue = 10

function setSliderBackground(value){
  const sliderRange = sliderMax - sliderMin
  const sliderPercent = Math.floor(100 * (value / sliderRange))
  $("#interestRange").css({
    background: `linear-gradient(90deg, #0000ff ${sliderPercent}%, #ffffff ${sliderPercent}%)`
  })
}

function setSliderValue(value){
  $("#interestRange").slider("value", value);
}

function setInputValue(value){
  $("#interestValue").val(value)
}


$(document).ready(()=>{
  $("#interestRange").slider({
    min: sliderMin,
    max: sliderMax,
    step: 1,
    // Handle when the user moves the slider
    slide: (event, ui)=>{
      const sliderValue = ui.value
      setInputValue(sliderValue)
      setSliderBackground(sliderValue)
    }
  })

  // Handle when the user types in a value
  $("#interestValue").change(()=>{
    const typedValue = $("#interestValue").val()
    setSliderValue(typedValue)
    setSliderBackground(typedValue)
  })
  
  // Stuff to do when the page loads
  setSliderValue(sliderDefaultValue)
  setInputValue(sliderDefaultValue)
  setSliderBackground(sliderDefaultValue)
})

<link href="https://code.jquery.com/ui/1.12.0-rc.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<p>Interest Rate:</p>

<div>
    <div id="interestRange"></div>
    <div id="interestLabel"></div>
</div>

<div>
    <input type="number" id="interestValue" />
</div>