I can't really grasp what class should I use to change the color of the slider in noUiSlider? I want the slider to have blue color to the left of the slider on the bar, and white to the right; how its demonstrated in this example. How can I do this?

Here is the part of creation of the slider:

$('#slider-range').noUiSlider({
        start: [ start ],
        step: 1,
        range: {
            'min': [ 1 ],
            'max': [ 10 ]
        }
    });

and in html:

<div id="slider-range" type="range"/></div>

I tried all possible classes described here, but the most I got was to have all bar blue or white, but not blue to the left and white ti the right. So, my question is how can I get this styling?

I can't really grasp what class should I use to change the color of the slider in noUiSlider? I want the slider to have blue color to the left of the slider on the bar, and white to the right; how its demonstrated in this example. How can I do this?

Here is the part of creation of the slider:

$('#slider-range').noUiSlider({
        start: [ start ],
        step: 1,
        range: {
            'min': [ 1 ],
            'max': [ 10 ]
        }
    });

and in html:

<div id="slider-range" type="range"/></div>

I tried all possible classes described here, but the most I got was to have all bar blue or white, but not blue to the left and white ti the right. So, my question is how can I get this styling?

• javascript
• jquery
• css
• nouislider

• Have you tried anything? Please post your code. – Dom Commented May 16, 2015 at 23:01
• 1 Please show your css. – Daedalus Commented May 17, 2015 at 3:29
• You can find css of noUiSlider here – Sergey Ivanov Commented May 17, 2015 at 3:33
• 1 I don't understand why this question received so many minuses, if it is still not answered. Is it so trivial? – Sergey Ivanov Commented May 17, 2015 at 15:20

2 Answers 2

Turns out you have to include connect option to slider.

$('#slider-range').noUiSlider({
        start: [ start ],
        step: 1,
        connect: "lower",
        range: {
            'min': [ 1 ],
            'max': [ 10 ]
        }
    });

I'm using Materialize Css version 1.0.0 and it includes noUiSlider as part of the library.

I was trying to style up this control with my own colors and here it is what I got after changing some classes:

All you have to do is to override this classes:

.noUi-connect {
    background: purple;
}
.noUi-horizontal .noUi-handle, .noUi-vertical .noUi-handle {
    background: purple;
}
.noUi-target.noUi-horizontal .noUi-tooltip {
    background-color: purple;
}

Here it is my pen for reference. I hope it helps some how.