JSFiddle - React, Tailwind, and code Playground

by Artem Borovikov

HTML

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

CSS

#slider 
{
    width: 80%;
    margin-left: 1em;
}

#min, #max {
    width: 50px;
    text-align: center;
}

JavaScript

$("#slider").slider({
    range: true,
    min: 100,
    max: 500,
    step: 10,
    values: [100, 500],
    slide: function(event, ui) {
        var delay = function() {
            var handleIndex = $(ui.handle).data('index.uiSliderHandle');
            var label = handleIndex == 0 ? '#min' : '#max';
            console.log('handleIndex' + handleIndex);
            console.log('label' + label);
            $(label).html('$' + ui.value).position({
                my: 'center top',
                at: 'center bottom',
                of: ui.handle,
                offset: "0, 10"
            });
        };
        
        // wait for the ui.handle to set its position
        setTimeout(delay, 5);
    }
});

$('#min').html('$' + $('#slider').slider('values', 0)).position({
    my: 'center top',
    at: 'center bottom',
    of: $('#slider a:eq(0)'),
    offset: "0, 10"
});

$('#max').html('$' + $('#slider').slider('values', 1)).position({
    my: 'center top',
    at: 'center bottom',
    of: $('#slider a:eq(1)'),
    offset: "0, 10"
});