JSFiddle - React, Tailwind, and code Playground

HTML

<div id="dragSlider"></div>

CSS

#dragSlider {
     width:400px;
 }

JavaScript

$.widget("#dragSlider", $.ui.slider, {
    _create: function () {
        this._super('_create');
        var drWidth = this.element.context.clientWidth;
        var drMax = this.options.max - this.options.min;
        var drStep = drWidth / drMax;
        var perc = drStep / drWidth;
        // turn handle into draggable widget
        this._handleDraggable(this.handle, drWidth, drMax);
        // add a basic ruler to the slider 
        this._addVisuals(drMax, drStep);
    },
    // setup handle as a draggable object
    // wire up draggable event handlers with slider event handlers
    _handleDraggable: function ($handle, drWidth, drMax) {
        var that = this;
        $handle.draggable({
            animate: true,
            axis: "x",
            containment: "parent",
            drag: function (event, ui) {
                // trigger slide event on drag
                that._trigger("slide", event, ui);
            },
            stop: function (event, ui) {
                // calculate percentage of handle's position relative to
                // the slider width
                var posPer = Math.round(ui.position.left / drWidth * 100);
                // calculate value for the slider based on handles position
                var sliderPos = (posPer / 100 * drMax) + that.options.min;
                // set new value(will trigger change event)
                that._setOption("value", sliderPos);
                // trigger slider's stop event
                that._trigger("stop", "slidestop", ui);
            }
        });

    },
    // add a "basic ruler"
    _addVisuals: function (drMax, drStep) {
        for (var i = 0; i <= drMax; i++) {
            if (i == 0) {
                $("#value").append("<span>|</span>");
            } else {
                $("#value").append("<span style='padding-left:" + (drStep - 3) + "px'>|" + "</span>");
            }
        }

    },
});
// implementation of custom slider 
$(document).ready(function () {
   ...