JSFiddle - React, Tailwind, and code Playground

by bouillard

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/redmond/jquery-ui.css">
<p>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" value="2" />
</p>
<p>
<div id="slider"></div>
</p>

JavaScript

var sliderValue = [2, 3, 4, 26, 39, 52, 65];

$(function() {
        $( "#slider" ).slider({
            value:0,
            min: 0,
            max: 6,
            step: 1,
            slide: function( event, ui ) {
                $( "#amount" ).val( sliderValue [ ui.value ] );
            }
        });
        $( "#amount" ).val(  sliderValue [ $( "#slider" ).slider( "value" )] );
    });