jQuery UI Slider - Snipp.ru

jQuery UI Slider - https://snipp.ru/js/jquery-ui-slider#tag-15643

by Miken912

HTML

<link rel="stylesheet" href="https://snipp.ru/cdn/jqueryui/1.12.1/jquery-ui.min.css">
<script src="https://snipp.ru/cdn/jquery/2.1.1/jquery.min.js"></script>
<script src="https://snipp.ru/cdn/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="wrapper">
	<div id="slider"></div>
	<div id="slider-range">
	  <input type="text" id="min" value="1">
	  <input type="text" id="max" value="210">    
	</div>
</div>

CSS

body {
	font-size:14px;
	padding: 15px 20px;
}
.wrapper {
	width: 300px;
	margin: 0 auto;
	padding: 20px;
}
#slider {
	margin-bottom: 20px;
}
#min {
	width: 120px;
	height: 26px;
	line-height: 26px;
	padding: 0;
	text-indent: 10px;
}
#max {
	width: 120px;
	height: 26px;
	line-height: 26px;
	padding: 0;
	text-indent: 10px;
	float: right;
}

JavaScript

$(function(){
	$('#slider').slider({
		range: true,
		min: 0,
		max: 210,
    step: 10,
		values: ['1', '210'],
		slide: function(event, ui) {
			$('#min').val(ui.values[0]);
			$('#max').val(ui.values[1]);
		}
	});
});