Search code examples
javascripthtmlcssslidernouislider

Slider range with custom styles and dynamic values

I'm working on slider for which I want some odd behaviour. I was looking for solutions and librarys but didn't find nothing that fully fits what I need and I have some problem with building it.

I'm trying to create slider for range value. With steps, dynamic min and max value. Also I found problematic to work with style effect.

Example:

slider with range from 0 - 50

step set to 10

min value is 16 (start value should be same) - to this point slider should be red

start point should be on 16 (which is hard to make when I want steps)

when value is >16 different color and for everything that is not selected like regular grey.

this is simple example for what i have in my mind

I was trying to use nouislider and overall everywhere I could. If anyone has any idea or solution I will be grateful for any help.

Solution

  • You can set this up in noUiSlider using the "non-linear ranges" and "padding" features.

    Basicaly, you'd set up three ranges:

    • 0 to 16, no step
    • 16 to 20, step of 4
    • 20 to 50, step of 10

    You'd then disable the first sub range by setting a padding of [16, 0].

    The styling you've described can be achieved by styling .noUi-target with your background colors.