JSFiddle - React, Tailwind, and code Playground

by Reigel Gallarde

HTML

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

CSS

body { background-color: green; }

#slider {
    float: left;
    width: 19px; height: 338px;
    background-image: url('http://www.zpnd.com/sak/images/bg_scroller.png');
    background-position: center center;
    background-repeat: no-repeat;
}

.ui-slider-handle {
    position: absolute; cursor: pointer;
    width: 19px; height: 31px;
    background-image: url('http://www.zpnd.com/sak/images/scroller.png') !important;
    background-position: center center;
    background-repeat: no-repeat;
}

JavaScript

$(document).ready(function() {
    $('#slider').slider({
        orientation: "vertical",
        min: 0,
        max: 100,
        handle: '#slider-handle',
        stop: function(event, ui) {
            console.log("stop", ui)
            //ul.animate({'left' : ui.value * -1}, 500);
        },
        slide: function(event, ui) {
            console.log("slide", ui)
            //ul.css('left', ui.value * -1);
        }
    });
});