/* customised css */ #styling-after-slider { margin-top: 3em; } #styling-after-slider .ui-slider-pip { top: -12px; } #styling-after-slider .ui-slider-pip .ui-slider-label { top: -18px; }
The plugin makes great use of presentation classes to provide powerful customisation. It's important that the slider fits the unique style of your project, and with slight CSS modification you can get some really interesting results.
/* here is a list of the presentation classes used in a heirarchical tree. */ .ui-slider .ui-slider-pips {} .ui-slider-float {} .ui-slider-handle {} .ui-slider-tip {} .ui-slider-pip {} .ui-slider-pip-nth {} .ui-slider-line {} .ui-slider-label {} .ui-slider-tip-label {} .ui-slider-pip-hide {} .ui-slider-pip-last {} .ui-slider-pip-first {} .ui-slider-pip-label {} .ui-slider-pip-inrange {} .ui-slider-pip-initial {} .ui-slider-pip-selected {} .ui-slider-pip-initial-nth {} .ui-slider-pip-selected-nth {}
To make the code as succinct and performant as possible; there's only minimal javascript configuration on how the pips are displayed, positioned, formatted, etc. Instead the power lies in the hands of CSS.
For example: instead of supplying an option to jQuery to make the pips sit above the slider, we should use CSS to override the
positioning of the .ui-slider-pip
, .ui-slider-line
and .ui-slider-label
like so:
/* using default css */
/* customised css */ #styling-after-slider { margin-top: 3em; } #styling-after-slider .ui-slider-pip { top: -12px; } #styling-after-slider .ui-slider-pip .ui-slider-label { top: -18px; }