<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"> <script src="////cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <div class="container"> <div class="row"> <h2><strong>Input bootstrap Range Slider jQuery Ui By </strong> <a href="https://goo.gl/pR8ito" target="_blank">Nababur</a> <br/></h2><br/> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <!-- Start slider --> <h1 class="text-center">Basic Range Slider jQuery Ui </h1> <label for="amount">Select Price:</label> <input type="text" id="amount" class="form-control" readonly="" style="font-weight: bold;color: green;margin-bottom: 15px"> <div id="slider"></div> <!-- End slider --> <br/><br/> <hr/> </div> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <!-- Start slider --> <h1 class="text-center">Advance Range Slider jQuery Ui</h1><br/></br> <label for="maxValue">Maximum Amount:</label> <input type="text" id="maxValue" class="form-control" readonly="" style="font-weight: bold;color: green;margin-bottom: 15px"><br/> <label for="minValue">Minimum Amount:</label> <input type="text" id="minValue" class="form-control" readonly="" style="font-weight: bold;color: green;margin-bottom: 15px"> <div id="advance"></div> Amount:<span id="state"></span><br/><br/> <div id="advance_slide"></div><br/> <!-- End slider --> </div> </div> </div>

// Basic Slider jQuery(document).ready(function(){ $("#slider").slider({ value:100, min:100, max:500, step:10, slide:function(event, ui){ $("#amount").val("Tk. "+ui.value) } }); $("#amount").val("Tk."+$("#slider").slider("value")); }); //Advance Range Slider jQuery(document).ready(function(){ var getOutput = $("#state"); var getSlider = $("#advance_slide"); getSlider.slider({ range:true, min:100, max:1000, values:[300, 500], step:50, slide:function(event, ui){ getOutput.html( ui.values[0]+' - '+ui.values[1]+'Tk'); $("#minValue").val(ui.values[0]); $("#maxValue").val(ui.values[1]); } }); getOutput.html(getSlider.slider("values",0)+' - '+getSlider.slider("values",1)+"Tk"); $("#minValue").val(getSlider.slider('values', 0)); $("#maxValue").val(getSlider.slider('values', 1)); });