How can I add text to a jQuery slider control?

Question

I'm using the jQuery UI Slider plugin to make sliders for my page, but I want to add different labels to each of the slider handles. The code for the sliders is a simple div:

<div class="slider"></div>

This is transformed into a slider through the CSS:

.ui-slider { position: relative; text-align: left; margin: 1.5em auto 1.5em auto; width:10% }
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.5em; height: 1.5em; cursor: default; }
.ui-slider .ui-slider-range { text-align:center; position: absolute; z-index: 1; font-size: .7em; display: block; border: 10; background-position: 0 0; }

.ui-slider-horizontal { height: .8em; }
.ui-slider-horizontal .ui-slider-handle { top: -.5em; margin-left: -.77em; }
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }

Then, the classes are added through scripting. I tried just putting the text between the div tags, but that didn't work:

<div class="slider">Testing</div>

enter image description here

How can I get the text on top of the slider handle, and allow the text to move with it?

EDIT: I got the text on top of the slider handle, but it won't move when the slider moves.

CSS:

.label {
    z-index:999;
    position:relative;  
}

HTML:

<div class="slider"><div class="label">Testing</div></div>

Result:

enter image description here

EDIT 2: Here's a Fiddle.

so you want to make the title move with the slider ? – MimiEAM Aug 09 '12 at 01:38 — MimiEAM, Aug 09 '12 at 01:38

unloco · Accepted Answer · 2016-04-29T11:32:53.190

3

try

$('.slider .ui-slider-handle').text('Hello').css({width:70,'text-align': 'center'});

just after $( ".slider" ).slider( {step: 1}, {min:-1}, {max:1}, {value:0} );

jsfiddle

edited Apr 29 '16 at 11:32

answered Aug 09 '12 at 01:39

unloco

6,928
2
47
58

Will this work if I have a bunch of sliders and want to put a different label on each one? All of them are simply
– Jon Aug 09 '12 at 01:47
It would if you add a specific id to each one of'em and then `$('#someid.slider .ui-slider-handle').text(...` for `
` – unloco Aug 09 '12 at 01:50
I'm having trouble centering the handle on the slider. It's supposed to slide from the center to either the left or the right. As I have it now, I'm using margin-left. But this won't work for larger handles (with more text). margin: auto auto; didn't work either. Thoughts? – Jon Aug 09 '12 at 02:10
check the updated jsfiddle http://jsfiddle.net/unloco/4KEdM/3/ added margin-left to .ui-slider-handle which is half its width and changed the width of .ui-slider – unloco Aug 09 '12 at 02:18
simple rule is to make larger .ui-slider for "larger" texts and give margin-left half the width of .ui-slider-handle. that way it would be always centered – unloco Aug 09 '12 at 02:25
So there's no way to make it dynamically or automatically center? – Jon Aug 09 '12 at 02:39
there's always a way, i'm gonna try and make a solution – unloco Aug 09 '12 at 02:41

score 1 · Answer 2 · answered Aug 09 '12 at 01:40

1

You could simply use jQuery to do this:

CSS

.ui-slider-handle { font-size:smaller; text-decoration:none;}

jQuery

$(".ui-slider-handle").text("Testing").width(50);

answered Aug 09 '12 at 01:40

anAgent

2,550
24
34

score 0 · Answer 3 · answered Aug 09 '12 at 02:04

Instead of just moving the Text, you could move any/all children elements. This would come in handy if you are wanting to drag larger items around (such as a button or image).

DEMO

I am sure you can come up with a little cleaner code; but this just grabs all the children elements and moves them down into the new anchor.

var slider = $( ".slider" ).slider( {step: 1}, {min:-1}, {max:1}, {value:0} );

slider.each(function(){
    var this$ = $(this);
    var children = this$.children().filter(':not(.ui-slider-handle)');
    this$.find('.ui-slider-handle').append(children);
});

How can I add text to a jQuery slider control?

3 Answers3