Is that always the range left end to min value and the right end to max value in noUiSlider two handles?

Question

Updated again : css style changed and not working appropriately when direction change to rtl, div.noUi-origin style turns to right, but does not work correctly.

Update 1: After adding 'direction' :'rtl' option in slider config. I've got two handles stuck together, looks like one handle, but works like two handles and value on the right is larger than value on the left.

No idea how to split them as two parts. (Does direction option only for single handle slider?? )

Also, trying to figure out how this filter get value range, since values pass to table update function doesn't work as well.

two handles stuck together as one.

I'm working on a two-handles range slider feature w/ nouiSilder.

I was trying to swap the min and max value on two end of silder ( min on the right end and max on the left end.), but failed.

I noticed for a slider with two handles, the result of slider.noUiSlider.get() is [value[0], value[2]].

All events provide this array as a parameter, as well as the handle index. but even I swapped the value[0] = max, value[2] = min, the two handles toggled together(as single handle), also can not make it as real "reversed range slider". Nouislider still pick the large value as max and small one as min, we can't hack it? Or function support calculating the margin distance doesn't allow us to swap handle value?

So my question is, does nouislider support the feature that swap two handle value that make max value on the left and min value on the right?

I did some search, but reverse handle looks like only work for single handle (option direction). So I just think the possibility to do the same with two handles?

Thanks.

Answer 1

The direction option (docs) does work for sliders with more than one handle, but it only affects the visual representation of the slider, not the order of the values returned by the get method or the arguments to the slider events.

As long as you use the handle index that's also part of the parameters to the sliders event callbacks, the order of the values shouldn't be relevant:

slider.noUiSlider.on('update', function(values, handle) {
    console.log(values[handle]);
});

To answer the main question:

does nouislider support the feature that swap two handle value that make max value on the left and min value on the right?

Yes, using the direction option.