jQuery Slider CSS Styling and Appearance

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 jqxSlider.

jqx-widget – applied to jqxSlider widget.
jqx-slider – applied to jqxSlider widget.
jqx-slider-tick – applied to the slider ticks which.
jqx-slider-tick-horizontal - applied to the ticks when the slider is in horizontal mode.
jqx-slider-tick-vertical - applied to the ticks when the slider is in vertical mode.
jqx-slider-tickscontainer – applied to the ticks container.
jqx-slider-slider – applied to the slider's thumb.
jqx-slider-slider-vertical - applied to the thumb when the slider is in vertical mode.
jqx-slider-slider-horizontal - applied to the thumb when the slider is in horizontal mode.
jqx-slider-track – applied to the slide track.
jqx-slider-track-horizontal - applied to the track when the slider is in horizontal mode.
jqx-slider-track-vertical - applied to the track when the slider is in vertical mode.
jqx-slider-rangebar – applied to the slider to indicate the selected value. In range slider mode is applied to the space between the slider thumbs to indicate the selected values.
jqx-fill-state-pressed – applied to the slider to indicate the selected value. In range slider mode is applied to the space between the slider thumbs to indicate the selected values.
jqx-fill-state-hover - applied to a slider element under the mouse cursor.
jqx-fill-state-focus - applied to the slider's elements when the widget is on focus.
jqx-fill-state-disabled - applied to the slider when it is disabled.

When you create a custom style with colors and backgrounds for jqxSlider, you need to do the following:

Add the above CSS classes related to jqxSlider
After each CSS class, add your theme name.
For example:
jqx-slider-summer
To apply your custom style to jqxSlider, you need to set its 'theme' property(option) to point to your theme name string.

The sample below demonstrates how to set the 'Summer' theme to jqxSlider.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<title>jQuery Slider Sample</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css"/>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.summer.css" type="text/css"/>
<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxslider.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body>
<div id='content'>
  <script type="text/javascript">
      $(document).ready(function () {
          $("#jqxslider").jqxSlider({ theme: 'summer', value: 7 });
      });
  </script>  
  <div id='jqxslider'></div>
</div>
</body>
</html>

You can see the result here: