JSFiddle - React, Tailwind, and code Playground

by leongersen

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/noUiSlider/5.0.0/jquery.nouislider.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/noUiSlider/5.0.0/jquery.nouislider.min.js"></script>
<form>
    <div id="sample-create"></div>                         
    <span id="slider_frontend" style="font-size:20px"></span>
    <input type="submit" value="Submit"/>
</form>

JavaScript

$("#sample-create").noUiSlider({
    range: [20, 100]
    ,start: 40
    ,step: 20
    ,handles: 1
    ,serialization: {
        to: [["slider_value",  [$("#slider_frontend"), "html"]]]
    }
    ,set: function(){
         alert($('form').serialize());   
    }
});