JSFiddle - React, Tailwind, and code Playground

by ykichanov

HTML

<!doctype html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" />
</head>
<body>
<div class="slideInput totalarea">
    <label>
        <input class="text from" name="totalareaFrom" value="20" type="text" style="width:30px" />
        </label>
        &mdash;
        <label>
            <input class="text to" name="totalareaTo" value="200" type="text"  style="width:30px" />
        </label>
        <br />
        <div class="slider" style="width:100px"></div>
    </div>
</body>
</html>

JavaScript

$( '.totalarea div.slider' ).slider({
    range: true,
    min: $('.totalarea input.from').val(),
    max: $('.totalarea input.to').val(),
    values: [
        $('.totalarea input.from').val(),
        $('.totalarea input.to').val()
    ],
    slide: function( event, ui ) {
        $('.totalarea input.from').val( ui.values[0] );
        $('.totalarea input.to').val( ui.values[1] );
    }
});