- Html
- </>
- ($)
go from this...
to this!
<div class="slider"></div>
$(".slider").slider().slider("pips").slider("float");
Examples
Show All Labels
By default we only show the labels for the first and last points, shown below is
an example of labels being applied to all pips.
- Html
- </>
- ($)
<div class="slider"></div>
$(".slider")
.slider({
max: 12
})
.slider("pips", {
rest: "label"
});
Hide Labels & Pips
It is possible to hide all the pips if we want a slider to show just the min/max values.
- Html
- </>
- ($)
<div class="slider"></div>
$(".slider")
.slider({
max: 12,
range: true,
values: [5, 15]
})
.slider("pips", {
rest: false
});
Only Show Pips
Instead of having the values shown for the first/last point,
we could only show pips. This might be good when we just need to show
the user how many options they have without showing explicit values.
- Html
- </>
- ($)
<div class="slider"></div>
$(".slider")
.slider({
max: 30
})
.slider("pips", {
first: "pip",
last: "pip"
});
Prefix / Suffix
If we need to add some content/context to our values, we can specify a prefix and/or suffix to spice things up. It would not be possible with css :before and :after because we already use these psuedo-elements for styling.
- Html
- </>
- {;}
- ($)
<div class="slider"></div>
/* Because of the prefix/suffix we need to shift the labels left
a little bit so they are still aligned centrally. */
#prefix-suffix-slider .ui-slider-label {
margin-left: -1.75em;
}
/* We also use a media query so the pips do not crowd-over each other
when we get to a small screen size */
@media screen and (max-width: 1040px) {
#prefix-suffix-slider .ui-slider-pip:nth-of-type(2n+1) .ui-slider-label {
display: none;
}
}
$(".slider")
.slider({
min: 0,
max: 100,
value: 50,
step: 10
})
.slider("pips", {
rest: "label",
prefix: "$",
suffix: ".00¢"
});
Check out the CSS & JS code, and also try resizing the browser to see the slider respond.
Custom Labels
It's possible with rest: "label" to set some custom labels to the slider instead of the
default values. It's important to note here that the slider will still return its integer value when $(".slider").slider("value"); is called.
- Html
- </>
- ($)
<div class="slider"></div>
// set up an array to hold the months
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
// lets be fancy for the demo and select the current month.
var activeMonth = new Date().getMonth();
$(".slider")
// activate the slider with options
.slider({
min: 0,
max: months.length-1,
value: activeMonth
})
// add pips with the labels set to "months"
.slider("pips", {
rest: "label",
labels: months
})
// and whenever the slider changes, lets echo out the month
.on("slidechange", function(e,ui) {
$("#labels-months-output").text( "You selected " + months[ui.value] + " (" + ui.value + ")");
});
More Custom Labels
Here's another example using labels except here we replace roman numbers with
the Chinese/Hanzi equivalent.
- Html
- </>
- {;}
- ($)
<div class="slider"></div>
#hanzi-labels-slider {
font-family: "SimHei", "Hei", sans-serif;
}
#hanzi-labels-slider .ui-sliper-pip {
font-size: 1.4em;
}
#hanzi-labels-slider .ui-slider-handle .ui-slider-tip {
font-size: 1.4em;
width: 42px;
margin-left: -22px;
height: 33px;
line-height: 30px;
top: -40px;
background: #434d5a;
border-color: #434d5a;
color: white;
}
#hanzi-labels-slider .ui-slider-handle .ui-slider-tip:before,
#hanzi-labels-slider .ui-slider-handle .ui-slider-tip:after {
border-top-color: #434d5a;
}
var hanzi = ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十"];
$("#hanzi-labels-slider")
.slider({
min: 0,
max: hanzi.length-1,
value: 3
})
.slider("pips", {
rest: "label",
labels: hanzi
})
.slider("float", {
labels: hanzi
});
Steps
Steps can be a little complicated. The default slider allows us to skip along the slider
in a pattern. eg: 0, 20, 40...
Steps are hard-wired in to the slider and so the pips and labels will match the step value.
- Html
- </>
- ($)
<div class="slider"></div>
$(".slider")
.slider({
min: 0,
max: 100,
step: 20
})
.slider("pips", {
rest: "label"
});
5% Interval
If we have more than 100 items on the slider (max - min >= 100), then the .slider("pips"); method will only show the pips at a 5% interval.
This is because we really do not want to be adding thousands of dom elements to the page for the pips.
It can have a dramatic effect on performance for the user. Additionally every pip requires
it's own pixel on the screen... so if we had more than 1000 pips, we would need a
screen size of at least 1000px wide.
- Html
- </>
- {;}
- ($)
<div class="slider"></div>
#steps-fivepercent-slider .ui-slider-tip {
visibility: visible;
opacity: 1;
top: -30px;
}
$(".slider")
.slider({
min: 0,
max: 1000,
range: true,
values: [200, 800]
})
.slider("pips", {
rest: "label"
})
.slider("float");
Multiplicative Steps
When a slider has the .slider("pips"); method applied to it, the pips method may also take a step option to allow additional control over the way pips are stepped visually. This option has no effect on the slider's functionality.
The step value on the .slider("pips"); method is multiplicative; meaning it will
only show every nth step that exists from the main .slider(); method.
- Html
- </>
- ($)
<div class="slider"></div>
$(".slider")
.slider({
min: 0,
max: 1000,
step: 100
})
.slider("pips", {
rest: "label",
step: 2
})
.slider("float");
Step Table
To further explain how the multiplicative step option works there is a table below
showing the resulting sliders with a selection of different step options.
{ step: } |
"pips", { step: } |
Result |
|---|---|---|
1 (default) |
1 (default) |
|
5 |
1 |
|
10 |
1 |
|
1 |
2 |
|
5 |
2 |
|
10 |
2 |
|
1 |
5 |
|
5 |
5 |
|
10 |
5 |
|
3 |
3 |
|
6 |
6 |
Vertical Sliders
All functionality that we've seen so far will also apply to vertical sliders. There's no limitation here except that your CSS may have to be slightly different to account for the slider being vertical.
- Html
- </>
- {;}
- ($)
<div class="slider"></div>
#vertical-slider {
height: 150px;
margin-left: 30px;
}
$(".slider")
.slider({
min: 0,
max: 20,
orientation: "vertical"
})
.slider("pips", {
rest: "label",
step: "5"
});
Styling
Circular Pips
Here's a quick example showing that it's possible to move the pips inside the slider area.
We've given them a thicker, rounded appearance with a minimal feel. Also the first and last pips are positioned at the beginning and end of the slider, respectively.
— Be sure to check out the css to see how it's done!
- Html
- </>
- {;}
- ($)
<div id="circles-slider"></div>
#circles-slider.ui-slider {
border-radius: 20px;
background: #434d5a;
border: none;
height: 10px;
margin: 1em 4em 4em; }
#circles-slider .ui-slider-handle {
border-radius: 23px;
height: 23px;
width: 23px;
top: -7px;
margin-left: -11px;
border: 2px solid #fffaf7; }
#circles-slider .ui-slider-pip {
top: 3px; }
#circles-slider .ui-slider-pip .ui-slider-line {
width: 4px;
height: 4px;
border-radius: 4px;
margin-left: -2px;
background: #fffaf7; }
#circles-slider .ui-slider-pip.ui-slider-pip-last,
#circles-slider .ui-slider-pip.ui-slider-pip-first {
top: -7px; }
#circles-slider .ui-slider-pip.ui-slider-pip-last .ui-slider-line,
#circles-slider .ui-slider-pip.ui-slider-pip-first .ui-slider-line {
display: none; }
#circles-slider .ui-slider-pip.ui-slider-pip-last .ui-slider-label,
#circles-slider .ui-slider-pip.ui-slider-pip-first .ui-slider-label {
margin: 0; }
#circles-slider .ui-slider-pip.ui-slider-pip-first .ui-slider-label {
left: -2em;
text-align: right; }
#circles-slider .ui-slider-pip.ui-slider-pip-last .ui-slider-label {
left: 2em;
text-align: left; }
#circles-slider .ui-slider-pip.ui-slider-pip-selected-initial {
font-weight: normal; }
#circles-slider .ui-slider-pip.ui-slider-pip-selected {
font-weight: bold; }
#circles-slider .ui-slider-pip.ui-slider-pip-selected,
#circles-slider .ui-slider-pip.ui-slider-pip-selected-initial {
color: #434d5a; }
$("#circles-slider")
.slider({
max: 10,
value: 5
})
.slider("pips");
Scale Slider
We have an example, here, of a slider set up with a range and in the pips plugin we tell
it to use labels for every single value (-50 ~ 50) but we've hidden all the labels with display:none; and then used css3 :nth-of-type(10n+3) to show every
10th label
— Be sure to check out the css to see how it's done!
- Html
- </>
- {;}
- ($)
<div id="scale-slider"></div>
#scale-slider.ui-slider {
border-radius: 0px;
background: #c7cdd5;
border: none;
height: 2px;
margin: 1em 4em 4em; }
#scale-slider.ui-slider .ui-slider-range {
background: linear-gradient(to right, #434d5a 0%, #00c7d7 50%, #434d5a 100%)
border: 1px solid rgba(67, 77, 90, 0.5);
height: 4px;
top: -1px;
transition: all 0.2s ease-out; }
#scale-slider .ui-slider-handle {
border-radius: 2px;
height: 20px;
width: 12px;
top: -26px;
border: none; }
#scale-slider .ui-slider-handle:nth-of-type(n+1) {
transform: rotateZ(-10deg);
margin-left: -9px; }
#scale-slider .ui-slider-handle:nth-of-type(n+2) {
transform: rotateZ(10deg);
margin-left: -3px; }
#scale-slider .ui-slider-handle:after {
content: "";
border: 6px solid transparent;
width: 0;
height: 0;
position: absolute;
bottom: -11px;
border-top-color: #434d5a; }
#scale-slider .ui-slider-handle.ui-slider-handle.ui-state-focus:after,
#scale-slider .ui-slider-handle.ui-slider-handle.ui-state-hover:after,
#scale-slider .ui-slider-handle.ui-slider-handle.ui-state-active:after {
border-top-color: #00c7d7; }
#scale-slider .ui-slider-pip {
top: 2px; }
#scale-slider .ui-slider-pip .ui-slider-label {
display: none;
background: rgba(67, 77, 90, 0);
color: #434d5a;
border-radius: 4px;
padding: 0.3em 0;
width: 2.4em;
margin-left: -1.2em;
transition: all 0.2s ease-out; }
#scale-slider .ui-slider-pip .ui-slider-line {
height: 4px; }
#scale-slider .ui-slider-pip:nth-of-type(5n+3) .ui-slider-line {
height: 8px; }
#scale-slider .ui-slider-pip:nth-of-type(10n+3) .ui-slider-line {
height: 12px; }
#scale-slider .ui-slider-pip:nth-of-type(10n+3) .ui-slider-label {
top: 16px;
display: block; }
#scale-slider .ui-slider-pip.ui-slider-pip-last .ui-slider-line {
margin-left: -1px; }
#scale-slider .ui-slider-pip.ui-slider-pip-selected .ui-slider-label,
#scale-slider .ui-slider-pip.ui-slider-pip-selected-first .ui-slider-label,
#scale-slider .ui-slider-pip.ui-slider-pip-selected-second .ui-slider-label {
background: rgba(67, 77, 90, 0.7);
color: #fffaf7; }
$("#scale-slider")
.slider({
max: 50,
min: -50,
values: [-20, 20],
range: true
})
.slider("pips", {
rest: "label"
});