JSFiddle - React, Tailwind, and code Playground

by ozzon91

HTML

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

CSS

#slider {
    background: url("http://dev.alpaca.org.ua/0_70575_12a0b257_orig.jpg") -354px top no-repeat;
    width: 346px;
    height: 502px;
}

.ui-slider .ui-slider-handle {
    width: 346px;
    height: 2px;
}

.ui-slider-vertical .ui-slider-handle {
    background: #000;
    left: 0;
    margin-bottom: 0;
}

.ui-slider-vertical .ui-slider-handle:after {
    position: absolute;
    right: -30px;
    top: -15px;
    content: '';
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #000;
}

.ui-widget-header {
    background: url("http://dev.alpaca.org.ua/0_70575_12a0b257_orig.jpg") no-repeat;
} 

.ui-slider .ui-slider-range {
    background-position: left top;
    background-attachment: fixed;
}

JavaScript

$('#slider').slider({
    orientation: "vertical",
    range: "min",
      min: 0,
      max: 100,
      value: 60,});