Apply CSS Styles

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.

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.

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>

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.

Concepts

ThemeRoller

Style Options

Widgets

Quick Start