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.

</>
($)

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

</>
{;}
($)
                <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
                    });