Как предотвратить растяжение слайдера?

Просто знакомлюсь с 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, спасибо!


slider c# jquery css asp.net-mvc-3
person horgh    schedule 05.09.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете установить ширину слайдера. Изменить ширину и высоту ползунка jquery

.ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
width:1em !important;
height:1em !important;
 cursor: default;
}

http://tycoontalk.freelancer.com/css-forum/200419-jquery-css-slider-width-100-problem.html

person Dr. Rajesh Rolen    schedule 05.09.2012
comment
Не могли бы вы дать мне подсказку, как я могу применить декларацию, которую вы показываете, к той, что у меня есть? - person horgh; 05.09.2012
comment
У меня там не ;, а ,.....Если добавить width: 150, ничего не изменится.....Если добавить width: 150 !important,, ползунок вообще исчезнет.. - person horgh; 05.09.2012
comment
Вы установили ширину: 150 или 150 пикселей? .. лучше написать 150 пикселей. - person Dr. Rajesh Rolen; 05.09.2012
comment
если я добавляю 150 ничего не меняется, если я добавляю 150px Visual Studio генерирует предупреждение о том, что ожидается запятая, и ползунок исчезает в результирующем представлении - person horgh; 05.09.2012
comment
Извините, когда я добавляю 150px, это вообще не приводит к jquery ui - person horgh; 05.09.2012
comment
Я бы сказал, что браузер не может его обработать - person horgh; 05.09.2012
comment
Я попытался поместить предоставленный вами код в файл Site.css, но ничего не изменилось. - person horgh; 05.09.2012
comment
Вы, вероятно, не могли этого уловить, но это представление asp.net mvc3 ... где я должен поместить этот css, чтобы слайдер его использовал? - person horgh; 05.09.2012
comment
Я отредактировал свой вопрос... Не могли бы вы взглянуть на него еще раз? - person horgh; 05.09.2012