Text label next to jquery slider (in div of unknown width)

Question

Inside a parent div, I want to have a text label on the left, and a slider (using jQuery UI) on the right.

I wish the slider to take up all the available space, and unlike this question, the parent div is of unknown width.

So conceptually it should be something like this (jsfiddle here with broken attempt):

<div id="parentDiv" style="width:100%">
<span>Unicorn awesomeness:</span><div id="unicornSlider"></div>
</div>

But I can't get anything easily that works on Chrome, FF3 and IE8. Does anyone have any ideas?

Answer 1

You could try setting the width using jQuery:

$('#unicornSlider')
    .width($('#parentDiv').width() -$('#parentDiv span').width() - 20)
    .slider()

I'ev updated your fiddle to include this. (I've also had to change the width of the parent div to be 90%, as 100% + padding was bigger than the window).

Update: I have noticed that this keeps that width when the browser window is resized. You could recalculate the width with $(window).resize(function).