Slider v1

by Yuri Andrianov

HTML

<script src="http://refreshless.com/nouislider/source/distribute/jquery.nouislider.all.js"></script>
<link href="http://fezvrasta.github.io/bootstrap-material-design/dist/css/material-fullpalette.min.css" rel="stylesheet">
<br><br><br>
   <div class="slider shor slider-success" id="slider-range1"></div>
    <center>Колличество: <span id="slider-value1"></span> шт.</center> 
<br><br>    <br>
    
   <div class="slider shor slider-info" id="slider-range"></div>
    <center>Размер: <span id="slider-value"></span> см.</center>
        <br><br>    <br>

JavaScript

$('#slider-range1').noUiSlider({
	start: [ 10 ],
    behaviour: 'snap',
	connect: 'lower',
    step: 10,
	range: {
		'min': [ 10 ],
		'max': [ 1000 ]
	}
});

$('#slider-range1').Link('lower').to($('#slider-value1'));

$('#slider-range').noUiSlider({
	start: [ 70 ],
    behaviour: 'snap',
	connect: 'lower',
    step: 10,
	range: {
		'min': [ 50 ],
		'max': [ 110 ]
	}
});

$('#slider-range').Link('lower').to($('#slider-value'));