JSFiddle - React, Tailwind, and code Playground

by andy_h

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/cupertino/jquery-ui.css">
<div id="slider"></div>

CSS

#slider 
{
    width: 80%;
    margin: 20px;
}

JavaScript

$(function() {
    
    $( "#slider" ).slider({
        value: "0",
        max: 10,
        min: -10,
        step: 1,
        slide: function(event, ui) {
            $("#user-submitted-name").val(ui.value);
            $(".ui-slider-handle").html("<div>" + ui.value + "</div>");
        }
    });
    
    $("#slider .ui-slider-handle").html("<div>" + "0" + "</div>");        
    
});