The various examples of nouislider show sliders that go from a minimum on the left to a maximum on the right. We now have a requirement to have the maximum on the left and for the slider to step down to the minimum. I was just wondering if anyone had managed to get nouislider to do this succesfully? I appreciate that the idea is somewhat daft, but I need to explore whether it's possible before I go back and say that.
Tried this:
$(".custom-slider").each(function () {
var slider = $('#' + $(this).attr('id') + ' div.ui-slider-handle');
let sliderDiv = slider[0];
//Configure the slider control
let scaleValues = [];
let scaleDensity = 1;
//scaleValues = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
scaleValues = [100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0];
scaleDensity = 10;
sliderDiv.style.width = "100%";
noUiSlider.create(sliderDiv, {
start: [0],
connect: true,
range: {
'min': 10,
'max': 0
},
step: -1,
pips: {
mode: 'positions',
values: scaleValues,
density: scaleDensity
}
});
working on this html:
<div>
<div class="custom-slider-container">
<div id="slider" class="custom-slider" runat="server">
<div class="ui-slider-handle"></div>
</div>
<br />
<br />
<br />
<br />
</div>
</div>
I have to say I didn't think this would work and it hasn't. I get a slider displayed, with no pip labels and returning a NaN for each pip.
You can use the direction
option to invert the slider direction.
noUiSlider.create(sliderDiv, {
start: 20,
direction: 'rtl', // right to left
range: {
'min': 0,
'max': 100
}
});