JSFiddle - React, Tailwind, and code Playground

by lucuma

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css">
<div style="width:400px; padding:20px;">
    <div id="slider"></div>
    <div class="amount" id="amount"></div>
</div>

    <input type="hidden" name="shirts" value="5" id="shirts">
    
    <input type="hidden" name="max_shirts" value="10" id="max_shirts">

JavaScript

$(function() {
        $( "#slider" ).slider({
            range: "min",
            value: parseInt($("input[name='shirts']").val()),
            min: 1,
            
            max: $("input[name='max_shirts']").val(),
            step: 1,
            slide: function( event, ui ) {
                $( "#amount" ).text( ui.value );
            },
             stop: function( event, ui ) {
                $( "#shirts" ).val( ui.value );
            }
        });
    });