JSFiddle - React, Tailwind, and code Playground

by chayacooper

HTML

<script src="  &lt;script type=&quot;text/javascript&quot; src=&quot;http://egorkhmelev.github.com/jslider/js/jquery.slider.min.js&quot;&gt;&lt;/script&gt;"></script>
<script src="   &lt;script type=&quot;text/javascript&quot; src=&quot;http://egorkhmelev.github.com/jslider/js/main.js&quot;&gt;&lt;/script&gt;"></script>
<script src="&lt;link rel=&quot;stylesheet&quot; href=&quot;http://egorkhmelev.github.com/jslider/plugins/google-code-prettify/prettify.css&quot; type=&quot;text/css&quot; charset=&quot;utf-8&quot;&gt;"></script>
<script src="&lt;link rel=&quot;stylesheet&quot; href=&quot;http://egorkhmelev.github.com/jslider/css/bootstrap.min.css&quot; type=&quot;text/css&quot; charset=&quot;utf-8&quot;&gt;"></script>
<script src="   &lt;link rel=&quot;stylesheet&quot; href=&quot;http://egorkhmelev.github.com/jslider/css/main.css&quot; type=&quot;text/css&quot; charset=&quot;utf-8&quot;&gt;"></script>
<link rel="stylesheet" href="http://egorkhmelev.github.com/jslider/css/jquery.slider.min.css" type="text/css" charset="utf-8">
<script type="text/javascript" src="http://egorkhmelev.github.com/jslider/js/jquery.slider.min.js"></script>

<div class="layout">
    <div class="layout-slider" style="width: 100px">
        <div id="Slider" type="slider" name="area" value="3"></div>
    </div>
    
    <div style="margin-top: 50px">  
     <select name="SliderSelect" id="SliderSelect">
        <option>1</option>
        <option>2</option>
        <option selected=selected>3</option>
        <option>4</option>
        <option>5</option>
    </select>    
   
</div>

CSS

.holder {
    width: 300px;
    padding: 10px;
}
div {
    margin-left: 20px
}

JavaScript

$(document).ready(function () {
    var select = $("#SliderSelect");
    jQuery("#Slider").slider({
        from: 1,
        to: 5,
        scale: ['Dislike', '', '', '', 'Love'],
        limits: false,
        step: 1,
        dimension: '',
        skin: "classic",
        change: function (evt) {
            $("#SliderSelect")[0].value = $(evt.target).slider("value");
        }
    });
    $("#SliderSelect").change(function () {
        jQuery("#Slider").slider("value", this.selectedIndex + 1);
    });
});