Wijmo UI for the Web
Apply CSS Styles
Wijmo User Guide > Widgets > Slider > Slider How To > 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.

CSS Selectors

  1. 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>
  2. 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.
  3. 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