React UI Components Documentation

Styling and Appearance

jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file.

Below is the list of CSS classes used by jqxRangeSelector.
  • jqx-widget - applied to the RangeSelector widget.
  • jqx-rangeselector - applied to RangeSelector widget.
  • jqx-rangeselector-slider - applied to RangeSelector's Slider element.
  • jqx-scrollbar-thumb-state-normal - applied to RangeSelector's Slider element.
  • jqx-rangeselector-shutter - applied to the areas which are situated on the Left and Right side of the Slider.
  • jqx-scrollbar-state-normal - applied to the areas which are situated on the Left and Right side of the Slider.
  • jqx-rangeselector-markers - applied to RangeSelector's Left and Right markers.
  • jqx-fill-state-normal - applied to RangeSelector's Left and Right markers.
  • jqx-fill-state-hover - applied to RangeSelector's Left and Right markers on Hover.
  • jqx-fill-state-pressed - applied to RangeSelector's Left and Right markers on Drag.
  • jqx-rangeselector-markers-value - applied to the element which displays the value in the markers.
  • jqx-rangeselector-marker-arrow - applied to the Left and Right marker arrows.
  • jqx-rangeselector-marker-left-arrow - applied to the Left marker arrow.
  • jqx-rangeselector-marker-right-arrow - applied to the Right marker arrow.
  • jqx-rangeselector-marker-arrow-bottom - applied to the markers markersPosition is set to "bottom"
  • jqx-rangeselector-marker-arrow-top - applied to the markers markersPosition is set to "top"
  • jqx-rangeselector-labels - applied to RangeSelector's labels.
  • jqx-rangeselector-group-labels - applied to the Group labels.
  • jqx-rangeselector-ticks - applied to RangeSelector's ticks.
  • jqx-fill-state-disabled - applied to the RangeSelector when it is disabled.
When you create a custom style with colors and backgrounds for jqxRangeSelector, you need to do the following:
  • Add the above CSS classes related to jqxRangeSelector.
  • After each CSS class, add your theme name.
    For example:
    jqx-rangeselector-energyblue
  • To apply your custom style to jqxRangeSelector, you need to set its 'theme' property(option) to point to your theme's name.