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.
• The sample below demonstrates how to set the 'Energy Blue' theme to jqxRangeSelector. [フレーム]