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.