Nouislider

Handles
Snapping between steps
Success Color
Left to right
Right to left

Code Here:


									
<h5 class="card-title">Handles</h5>
<div class="form-group border-bottom pb-3">
    <div id="slider-handles" class="mt-3 mb-3"></div>
</div>
<h5 class="card-title">Snapping between steps</h5>
<div class="form-group border-bottom pb-3">
    <div id="slider-snap" class="mt-3 mb-3"></div>
</div>
<h5 class="card-title">Success Color</h5>
<div class="form-group border-bottom pb-3">		
	<fieldset>
        <div class="form-group">
            <div id="success-color-slider" class="circle-filled slider-success "></div>
        </div>
    </fieldset>
</div>
<h5 class="card-title">Left to right</h5>
<div class="form-group border-bottom pb-3">		
	<fieldset>
        <div class="form-group">
             <div id="pips-range" class="mt-3 mb-5"></div>
        </div>
    </fieldset>
</div>
<h5 class="card-title">Right to left</h5>
<div class="form-group border-bottom pb-3">		
	<fieldset>
        <div class="form-group">
             <div id="pips-range-rtl" class="mt-3 mb-5"></div>
        </div>
    </fieldset>
</div>
									
								

Init Code


									
// Handles
var handlesSlider = document.getElementById('slider-handles');

noUiSlider.create(handlesSlider, {
    start: [4000, 8000],
    range: {
        'min': [2000],
        'max': [10000]
    }
});

// Snapping between steps
var snapSlider = document.getElementById('slider-snap');

noUiSlider.create(snapSlider, {
    start: [0, 500],
    snap: true,
    connect: true,
    range: {
        'min': 0,
        '10%': 50,
        '20%': 100,
        '30%': 150,
        '40%': 500,
        '50%': 800,
        'max': 1000
    }
});

// Success
var successColorSlider = document.getElementById('success-color-slider');

noUiSlider.create(successColorSlider, {
    start: [40, 60],
    behaviour: 'drag',
    connect: true,
    range: {
        'min': 20,
        'max': 80
    }
});

// Range
var range_all_sliders = {
    'min': [0],
    '10%': [5, 5],
    '50%': [40, 10],
    'max': [100]
};
 // Range
var pipsRange = document.getElementById('pips-range'),
    pipsRangeRtl = document.getElementById('pips-range-rtl');

noUiSlider.create(pipsRange, {
    range: range_all_sliders,
    start: 0,
    pips: {
        mode: 'range',
        density: 3
    }
});

noUiSlider.create(pipsRangeRtl, {
    range: range_all_sliders,
    start: 0,
    direction: 'rtl',
    pips: {
        mode: 'range',
        density: 3
    }
});
									
								

Required Files For Nouislider Here


									
<!-- CSS Here -->
<link href="../../assets/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet">
<link href="../../assets/extra-libs/nouislider/palette-noui.css" rel="stylesheet">
<link href="../../assets/extra-libs/nouislider/noui-slider.min.css" rel="stylesheet">
<!-- Javascript Here -->
<script src="../../assets/libs/wnumb/wNumb.js"></script>
<script src="../../assets/libs/nouislider/distribute/nouislider.min.js"></script>
<script src="../../assets/extra-libs/nouislider/nouislider-init.js"></script>
									
								
All Rights Reserved by Severny. Designed and Developed by WrapPixel.