Я перепробовал множество способов уместить мою ручку в моем слайдере и не могу заставить ее работать

0

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

Мой CSS файл

div.ui-slider-range.ui-widget-header {
background:#C6DC84;  
height:42px; 
}
div.ui-widget-content {
background: #D3D3D3;
height:42px;
}

div.ui-slider-horizontal .ui-slider-handle {
background:#A18ABF;
text-decoration:none;
width:5px;
height:42px;
margin-left:-2px;
border:none;

}

и мой JQuery

$(function () {

          $("#slider-range-Monday").slider({

              range: true,

              min: 0,

              max: 24,

              values: [0, 24],

              animate: 'slow',

              slide: function (event, ui) {

                  $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);

              }

          });

          $("#amount").val("$" + $("#slider-range").slider("values", 0) +

            " - $" + $("#slider-range").slider("values", 1));

});

Я почти уверен, что у меня что-то отсутствует в css.

благодаря

  • 0
    покажи нам живой пример (может быть jsfiddle?)
  • 0
    Конечно, я могу это сделать. Я никогда не делал этого раньше, так что это займет у меня пару минут.
Показать ещё 3 комментария
Теги:

1 ответ

0
Лучший ответ

Пользовательский интерфейс jQuery определяет position:relative умолчанию position:relative и top: -2px для ручки ползунка. Все, что мне нужно сделать, это удалить его.

Поэтому я добавил к CSS:

div.ui-slider-horizontal .ui-slider-handle {
    ...
    top: 0;    /* override jQuery UI defaults */
}

Здесь он работает: JSFiddle.

Поделиться
  • 0
    Спасибо! это работает отлично. Я даже не думал о «вершине», большое спасибо, я действительно ценю это. Теперь я должен задать еще один вопрос, но я собираюсь выяснить, смогу ли я понять это, прежде чем я задам вопрос. Следующим шагом будет добавление метки для каждой ручки. Я пытался сделать это раньше и потерпел неудачу. Я попытался сделать легенду над ней, я могу это сделать, но она не расположена должным образом, чтобы соответствовать шагам.
  • 0
    Как это: JSFiddle ?
Показать ещё 6 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню