Skip to main content




Applies only to Traditional Web Apps
Service Studio version:

Range Slider Interval Reference

  • Edit
    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

    • SelectedMinValue: Integer
    • SelectedMaxValue: Integer

    Layout and classes

    CSS selectors

    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.

    Advanced use case

    Change the interval color

    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)

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

    Removing the || of the handlers

    1. Create a class .range-slider .noUi-handle:before, .range-slider .noUi-handle:after.

    2. Set the content to height: 0px.

    3. Publish the application.

    • Was this article helpful?