Как изменить ползунки слайдера?

99
17 февраля 2019, 23:50

Есть слайдер с измененными ползунками (clip-path). Как можно сделать так, чтобы при максимальном сведении ползунков, "стрелки" ползунков смещались друг к другу, а не наезжали как сейчас?

Код

https://jsfiddle.net/rs9djf0L/1/

.ui-slider-horizontal .ui-slider-handle:nth-child(2)
{
/*margin-left:-20px; Стрелка при клике ведет себя не адекватно, смещая курсор - не приятно*/
background: #1b8ee3 !important;
margin-top: -0.54rem !important;
content: '';
display: block;
position: absolute;
top: 4px;
right: 0px;
bottom: 0px;
left: 0px; 
-webkit-clip-path: polygon(50% 0%, 100% 50%, 100% 50%, 50% 100%, 0 100%, 0 0);
clip-path: polygon(50% 0%, 100% 50%, 100% 50%, 50% 100%, 0 100%, 0 0);
}

.ui-slider-horizontal .ui-slider-handle:nth-child(3)
{
background: #1777BE !important;
margin-top: -0.54rem !important;
content: '';
display: block;
position: absolute;
top: 4px;
right: 0px;
bottom: 0px;
left: 0px; 
-webkit-clip-path: polygon(50% 0%, 100% 0, 100% 100%, 50% 100%, 0 50%, 0 50%);
clip-path: polygon(50% 0%, 100% 0, 100% 100%, 50% 100%, 0 50%, 0 50%);
}

PS Возможно, задача трудно реализуема. Так, как нужно как то сдвинуть также область захвата ползунка, чтобы мышка вела себя адекватно. Простой сдвиг (margin-left:-20px;) и при перемещении слайдера курсор начинает "гулять". Что плохо.

Возможно есть и другой слайдер, который реализует данную задачу (ну если тут вообще никак)?

READ ALSO
Как поменять ширину отдельной ячейки

Как поменять ширину отдельной ячейки

Есть таблица, ширина первого столбца 30pxНужно сделать ячейку 1а шириной 50px, оставив при этом остальную структуру неизменной

116
Веб-шрифт мылит

Веб-шрифт мылит

Подскажите, пожалуйста, хочу на сайте использовать шрифт Raleway, скачал с github последнюю версию, конвертировал через Transfonter (через Font Squirrel аналогично)Подключил...

136
Прикрепление файла js

Прикрепление файла js

Всем привет,есть такой вопрос,у меня на стороне бэка генерируется и сохраняется файл,и у меня есть страница,для прикрепления файла,можно...

121
Попарный вывод записей

Попарный вывод записей

есть две сущности: спортсмены и их бои, нужно попарно выводить записи кто с кем деретсяРеализовал две сущности в отношении @ManyToMany

107