How do I change the sliders of the slider?

  • 0
    There is a slider with changed sliders (clip-path).
    How can you make sure that when the sliders are brought together as much as possible, the "arrows" of the sliders move towards each other, and not run over like now?


    Code
    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%);
    }
    jQuery Isabelle Burton, Jun 29, 2020

  • 0 Answers
Your Answer
To place the code, please use CodePen or similar tool. Thanks you!