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