Текстовая метка рядом с ползунком jquery (в div неизвестной ширины)

Question

Внутри родительского div я хочу, чтобы текстовая метка находилась слева, а ползунок (используя пользовательский интерфейс jQuery) - справа.

Я хочу, чтобы ползунок занимал все доступное пространство, и в отличие от этого вопроса , родительский div имеет неизвестную ширину.

Так что концептуально это должно быть что-то вродеэто ( jsfiddle здесь с неудачной попыткой):

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

Но я не могу легко получить что-нибудь, что работает на Chrome, FF3 и IE8.У кого-нибудь есть идеи?

Answer 1

Вы можете попробовать установить ширину, используя jQuery:

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

Я обновил скрипку , чтобы включить это. (Мне также пришлось изменить ширину родительского элемента div на 90%, так как отступ 100% + был больше окна).

Обновление: Я заметил, что эта ширина сохраняется при изменении размера окна браузера. Вы можете пересчитать ширину с помощью $(window).resize(function).