Building on the Quick Start example, you can change the colors and styles of each element in the slider using CSS styling. Here is a list of available slider CSS selectors, or you can find the selectors in the jquery.wijmo.wijslider.css file in your installation folder.
CSS Selectors
- wijmo-wijslider
- wijmo-wijslider-horizontal
- wijmo-wijslider-horizontal .wijmo-wijslider-track
- wijmo-wijslider-horizontal .wijmo-wijslider-decbutton
- wijmo-wijslider-horizontal .wijmo-wijslider-incbutton
- wijmo-wijslider-vertical
- wijmo-wijslider-vertical .wijmo-wijslider-track
- wijmo-wijslider-vertical .wijmo-wijslider-decbutton
- wijmo-wijslider-vertical .wijmo-wijslider-incbutton
- In the <head> section of your HTML file, replace the style that includes the width of the slider with this one, which changes the border-color, border-width, and background-color for many elements of the slider.
Drop down and copy styles to paste in <head> section
| Style |
Copy Code
|
<style type="text/css">
#slider
{
/*Sets the styles of the slider track.*/
border-color: Black;
border-width: thin;
background-color: CornflowerBlue;
width: 300px;
}
.wijmo-wijslider-incbutton
{
/*Sets the styles of the outer edge of the increment button.*/
background: CornflowerBlue;
}
.wijmo-wijslider-decbutton
{
/*Sets the styles of the outer edge of the decrement button.*/
background: CornflowerBlue;
}
.wijmo-wijslider-incbutton .ui-icon-triangle-1-e
{
/*Sets the styles of the inner circle of the increment button.*/
background-color: White;
}
.wijmo-wijslider-decbutton .ui-icon-triangle-1-w
{
/*Sets the styles of the inner circle of the decrement button.*/
background-color: White;
}
#slider .ui-slider-handle
{
/*Sets the styles of the thumb button.*/
background: LightSteelBlue;
border-color: Black;
}
</style> |
- No changes are necessary in the script or in the <body> section of your HTML file. The basic <div> tag is sufficient to create the slider.
- Save your HTML file and open it in a browser. The widget appears like the one in the live widget below, with the SliderCSS.
See Also
Concepts
Widgets
Show All
Hide All