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

Question

[Евгений Иванов]

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


Код
https://jsfiddle.net/rs9djf0L/1/

CSS

.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%);
}

Comments

[Владимир Обабков]

Вероятно вам надо отслеживать расстояние между ползунками.. ползунок 2 - ползунок 1.
Если оно равно 0 или когда они там соприкасаются.. Запрещать им двигаться даль или как-то по иному контролировать процесс.
Из под CSS это не правится.. Т.к передвижение происходит с помощью инлайновых left