Подойдет любой вариант. Как с использованием CSS, так и с использованием JS/JQUERY.
Есть слайдер (JQUERY-UI Slider). У слайдера много "значений" - около 360 (range 0-360).
Ширина слайдера относительно небольшая. При отображении близких значений, например 359-360, ползунки слайдера накладываются друг на друга. И это нормально т.к. уменьшать их уже не имеет смысла.
Но изменить стиль каждого из ползунков (левый красный, правый синий) было бы неплохо.
Как это можно сделать?
Пока я только смог изменить стиль обоих ползунков т.к. не вижу в коде (jquery-ui.css) их деления на правый и левый.
https://jsfiddle.net/js_user_/txL14bvu/3/
html
<div id="my_ui_2-range_horizontal_slider_1" class="my_ui_2-range_horizontal_slider_1">
</div>
css (перезапись стандартных стилей)
.ui-slider {
cursor: pointer !important;
height: 4px !important;
background: #353343 !important;
border-radius: 1px !important;
border: 0px solid #353343 !important; }
.ui-slider-handle {
height: 1.25rem !important;
width: 0.875rem !important;
background: #1b8ee3 !important;
border: 1px solid #1b8ee3 !important;
border-radius: 0px !important;
cursor: pointer !important;
-webkit-appearance: none !important;
margin-top: -0.3125rem !important;
outline: none !important; }
.ui-slider .ui-slider-range {
background: #1b8ee3 !important; }
javascript
$( function() {$( "#my_ui_2-range_horizontal_slider_1" ).slider(
{range:true,min:0,max:360,values:[100, 300],step:1,animate:true,disabled:false});}
);
$(document).ready(function() {
jQuery("#my_ui_2-range_horizontal_slider_1").slider({
/*slide - при каждом перемещении, stop - при остановке*/
stop: function( event, ui )
{
alert (ui.values[ 0 ]);
}
});
});
Простой