JSFiddle - React, Tailwind, and code Playground

by jeka5555

HTML

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Slider - Range slider</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
</head>
<body>

<div id="slider-range"></div>
 
</body>
</html>

CSS

#slider-range { margin-top:20px; }

JavaScript

$(function() {
        $( "#slider-range" ).slider({
            range: true,
            min: 0,
            max: 500,
            values: [ 75, 300 ],
            slide: function( event, ui ) {
    $('#slider-range, #slider-range .ui-slider-range').toggleClass('ui-widget-header ui-widget-content');
            }
        });
     
    });