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

Есть слайдер с измененными ползунками (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;) и при перемещении слайдера курсор начинает "гулять". Что плохо.

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