javascript - noUiSlider：如何设置填充样式？

Question

如何为 noUiSlider 填充设置背景颜色？

（默认，线性，一个手柄）像这样：

找到了这个，但是：

1）我没有.noUi-background课（14.0.3版）。

2）我想用updateOptions. 所以我需要自动改变风格。

标签： javascriptcssnouislider

Answer 1

我认为这对我有用。

该代码段在此处无法使用，但我认为您可以将.noUi-background类添加到滑块中，然后在调用滑块上的更新函数时更新渐变样式。

var updateSlider = document.getElementById('slider-update');
var updateSliderValue = document.getElementById('slider-update-value');

/* Set up min and max */
var min = 0;
var max = 40;

/* Create slider */
noUiSlider.create(updateSlider, {
  range: {
    'min': min,
    'max': max
    },
    padding: 6,
    start: 20,
    margin: 2,
    step: 2
});

/* When update the slider, update the gradient style */
updateSlider.noUiSlider.on('update', function (values, handle) {
  updateSliderValue.innerHTML = values[handle];
  
  // Update gradient
  let distanceFromMin = (values[handle] - min);
  let sliderRange =  (max - min);
  let valueGradient = 100 * ( distanceFromMin / sliderRange );
  updateSlider.style.backgroundImage = "linear-gradient(to right, #a2ea4c "+valueGradient+"%, #07aa91 "+valueGradient+"%)";
});

/* Update min/max when calling updateOptions */
var button1 = document.getElementById('update-1');
var button2 = document.getElementById('update-2');
button1.addEventListener('click', function () {
    min = 20;
    max = 50;
    updateSlider.noUiSlider.updateOptions({
        range: {
            'min': min,
            'max': max
        }
    });
});

button2.addEventListener('click', function () {
    min = 10;
    max = 40;
    updateSlider.noUiSlider.updateOptions({
        range: {
            'min': min,
            'max': max
        }
    });
});

/* Class for the gradient */
.noUi-background {
  background-image: linear-gradient(to right, #a2ea4c 50%, #07aa91 50%);
}
                
button{
  margin-top:50px;
}

<div class="container">
  <div id="slider-update" class="noUi-background"></div> <!-- Adding noUi-background class -->
  <span id="slider-update-value"></span>
  
  <button class="update-button" id="update-1">
  Set range [20, 50]
  </button>
  <button class="update-button" id="update-2">
  Set range [10, 40]
  </button>
</div>