<div class="slider"></div>
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.
<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 + ")"); });
Here's another example using labels
except here we replace roman numbers with
the Chinese/Hanzi equivalent.
<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 });