jQuery UI Slider Отсутствует BG

Question

Я использую ползунок диапазона с пользовательским интерфейсом jQuery, но когда я перемещаю ползунок, фоновая линия не отображается, поэтому трудно сказать, где она находится. Как выделить фоновую линию только для выбранной части?

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>");
});

Answer 1

Я удаляю код «8% / 24%», потому что он, похоже, не относится к этому вопросу.

Есть несколько способов установить фон. Вы можете вставить новый элемент внутрь #interestRange и изменить его ширину в зависимости от значения ползунка. Но если вам не нужно беспокоиться о поддержке устаревших браузеров, было бы намного проще использовать linear-gradient для background из #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>