Range Slider Interval Reference

Collaborate with us

Edit this page on GitHub

Events

Event Name	Description	Mandatory
OnChange	Event triggered once a handler is dragged and the values change.	True

Return values

Element	CSS Class	Description
Lesser handle	.noUi-handle-lower	It's the lesser handle, used to customize (use also the :before and :after).
Upper Handle	.noUi-handle-upper	It's the upper handle, used to customize (use also the :before and :after).
Interval	.noUi-connect	Used to change the color of the interval.

Write the following CSS in the CSS editor and change the yourcolor to your color:

.range-slider .noUi-connect {
    background: yourcolor;
}

Or using the CSS variables: var(--color-yourcolor)
Example:

.range-slider .noUi-connect {
    background: var(--color-red);
}

Create a class .range-slider .noUi-handle:before, .range-slider .noUi-handle:after.
Set the content to height: 0px.
Publish the application.