jQuery пользовательский слайдер - ручка слайдера пользовательского интерфейса из div - PullRequest
Новая
       11

jQuery пользовательский слайдер - ручка слайдера пользовательского интерфейса из div

0 голосов
/ 05 марта 2020

Пожалуйста, помогите мне с моей проблемой ... Как и где установить, чтобы при достижении 100% справа .ui-slider-handle не превышал div 

Live preview https://codepen.io/Melwee/pen/Exjwoyo

А вот картинка, чтобы уточнить, что я имею в виду enter image description here

Ответы [ 2 ]

0 голосов
/ 05 марта 2020

Вам нужно установить левое поле как половину размера dis c, как для border-radius. После этого установите левую и правую границы ползунка на один и тот же цвет виджета: 

.ui-slider .ui-slider-handle {
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.08);
  border: 14px solid #f9f9ff;
  height: 53px;
  width: 53px;
  border-radius: 27px;
  background: #ff4c60;
  cursor: pointer;
  margin-top: -9px;
  margin-left: -27px; /* set margin to 0.5 the width */
}

.ui-slider.ui-slider-horizontal {
  border-left: 25px solid #ff4c60 !important;
  border-right: 24px solid #ffffff !important;
}
.ui-slider.ui-slider-horizontal .ui-slider-range-min {
  border-radius: 0;
}

После этого вам просто нужно настроить нижний колонтитул: 

.lc-slider-footer {
    width: 100%;
    padding: 7px 4px; /* adjust footer */
    display: flex;
    justify-content: space-between;
    -ms-align-items: center;
    align-items: center;
}
0 голосов
/ 05 марта 2020

Хорошо. Я не знаю, примете ли вы это как ответ, но на самом деле ваш вопрос не имеет правильного ответа. Можно лишь дать вам другую точку зрения по этому вопросу.

Я думаю, что если вы добавите немного margin-left к .ui-slider-handle, например: 

margin-left: -25px;

, а затем расширите .lc-slider padding вроде: 

padding: 5px 20px;

будет выглядеть лучше.

https://codepen.io/batuhabibi/pen/MWwEQKX

...