JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slider"></div>

CSS

.ui-slider {
    margin-top: 50px;
}
.ui-slider .ui-slider-handle {
    height: 50px;
    background: blue;
}
.ui-slider-handle:nth-child(even) {
    top: -30px;
    background: red;
}

.ui-slider .ui-slider-handle:hover {
    background: green;
}
}

JavaScript

$('#slider').slider({
    max: 10,
    values: [5, 5]
});