JSFiddle - React, Tailwind, and code Playground

by CHAITANYA K

HTML

<script src="http://www.tgslayouts.com/layouts/views/js/jquery.nouislider.min.js"></script>
<link rel="stylesheet" href="http://www.tgslayouts.com/layouts/views/css/jquery.nouislider.min.css">
<div class="row">
                	<div class="col-lg-12 col-md-12 col-sm-12">
                        <div class="formBlock">
                            <div class="pricesliderpositon">
                                <div class="priceInput">
                                	<input type="text" name="h_price-min" readonly="readonly" id="price-min" class="priceInput" />
                                </div>
                                <span style="float:left; margin-right:10px; margin-left:10px;">-</span>
                                <div class="priceInput"><input type="text" readonly="readonly" name="h_price-max" id="price-max" class="priceInput" /></div>
                            </div><br/>
                            <div class="priceSlider"></div>
                            <div class="priceSliderLabel"><span>250000</span><span style="float:right;">9000000</span></div>
                        </div>
                    </div>
                    
</div>

JavaScript

var Link = $.noUiSlider.Link;
$(".priceSlider").noUiSlider({
     range: {
      'min': 250000,
      'max': 9000000
    }
    ,start: [650000, 8000000]
    ,step: 1000
    ,margin: 100000
    ,connect: true
    ,direction: 'ltr'
    ,orientation: 'horizontal'
    ,behaviour: 'tap-drag'
    ,serialization: {
        lower: [
            new Link({
                target: $("#price-min")
            })
        ],

        upper: [
            new Link({
                target: $("#price-max")
            })
        ],

        format: {
        // Set formatting
            decimals: 0,
            thousand: '',
            prefix: 'Rs. '
        }
    }
});