jQuery UI slider: how to inline it?

Question

I'm trying to display several sliders with labels on the same line, eg:

Label1: [----O--]  Label2: [--O---]  Label3: [O-----]

All this content is created via JS:

var controls = $('<div></div>');
controls.append($('<b>Label1:</b>'));
controls.append($('<div></div>').slider({...}));
controls.append($('<b>Label2:</b>'));
controls.append($('<div></div>').slider({...}));
controls.append($('<b>Label3:</b>'));
controls.append($('<div></div>').slider({...}));
// insert controls in the DOM

What's the proper way to inline sliders? By default they are rendered as block elements and break lines accordingly. I tried changing CSS display:inline in this case the slider just collapses...

Answer 1

Use display:inline-block instead to keep it from collapsing. You may or may not need to use a set width after that.

Answer 2

In case you're as noobious as I, this elaboration may help: You should be including the jquery-ui css, for example, this URL:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css

In it, you will see this:

.ui-slider .ui-slider-range { 
    position: absolute; z-index: 1; 
    font-size: .7em; 
    display: block; 
    border: 0; background-position: 0 0; 
}

This sets the display to block. You want it to be inline-block. But if you're including that css from the web, you can't edit it. So you need to adjust your own css to make it work.

In your css, add this line to override the display attribute for the ui-slider class:

.ui-slider { display : inline-block; width : 10em; }

Adjust the width to be what you need.