JSFiddle - React, Tailwind, and code Playground

by slandmann

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>

<div id="slider"></div>
<p>Slider Val:<span id="slider-value"></span></p>
<input id="amount">

CSS

h1 {
    font-family: Helvetica, Arial;   
    font-weight: bold;
    font-size: 18px;
}

body, p{
    font-family: Helvetica, Arial;
}

JavaScript

var dataPoints = [34.2, 35.0, 36.0, 37.0, 38.0, 39.0, 40.0, 41.0, 41.7];
$("#slider").slider({
    value: dataPoints[0],
    min: 0,
    max: 100,
    step: 1,
    slide: function( event, ui ) {
        console.log(ui.value);
        if(ui.value > 41.7){
            return false;
        }
        $( "#amount" ).val( ui.value / 10 );
    }
});

$("#amount").val(dataPoints[0]);