Просто знакомлюсь с jQuery UI. Итак, это блок кода с моей точки зрения:
<label id="min">
5000</label>
<div id="slider">
</div>
<label id="max">
9000</label>
И часть скрипта:
$('#slider').slider({
animate: true,
range: true,
min: 5000,
max: 9000,
values: [5000, 9000],
slide: function (event, ui) {
//doing smth
}
});
Все работает нормально, но ползунок растянут и занимает всю строку. Этикетки внизу и под ним. Я ожидал, что они все будут в одну линию.
Что я должен сделать, чтобы достичь этого?
ИЗМЕНИТЬ
Это то, что я ожидаю:
И вот что у меня есть:
ИЗМЕНИТЬ
Я попытался переопределить css ползунка, добавив следующий код в файл Site.css:
.ui-slider .ui-slider-handle
{
position: absolute;
z-index: 2;
width: 0.5em !important;
height: 1.2em !important;
cursor: default;
}
но ничего не изменилось. Как я могу заставить jQuery использовать этот css?
Еще одно замечание: исходный CSS выглядит так:
.ui-slider .ui-slider-handle
{
position: absolute;
z-index: 2;
width: 1.2em;
height: 1.2em;
cursor: default;
}
Итак, проблема в css? Или что-то еще заставляет мой ползунок растягиваться??
ЕЩЕ
Это сгенерированный html:
<div id="slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
<div class="ui-slider-range ui-widget-header" style="left: 25.95%; width: 74.05%;">
</div>
<a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 25.95%;">
</a>
<a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 100%;">
</a>
</div>
Наконец-то
Мне пришлось переопределить класс .ui-slider
, а не .ui-slider .ui-slider-handle
. В этом была проблема.
Раджеш Ролен, DotNet De, спасибо!