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.

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.

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.