Варианты оформления jQuery UI Slider

Все варианты в данной заметке являются адаптивными, и слайдер не зависит от ширины блока, в котором он находятся.

Установка плагина

подключаем библиотеку jQuery версии 1.7+
подключаем библиотеку jQuery UI с виджетом Slider
подключаем плагин jQuery UI Touch Punch для корректной работы ползунков на тачпадах

Более подробно об этом плагине можно узнать в статье: Ползунок диапазонов jQuery UI Slider

Вариант 1

Данный пример не привязан к начальному и конечному значению слайдера, но подходит только для небольшого диапазона

<div class="polzunok-container-1">
	<div class="polzunok-1"></div>
</div>

</div>

$(".polzunok-1").slider({
    min: 1,
    max: 7,
    value: 4,
    range: "min",
    animate: "fast",
});
var opt = $(".polzunok-1").data().uiSlider.options,
min = opt.min,
raz = opt.max - min;
for (var i = 0; i <= raz; i++) {
	$(".polzunok-1").append($('<b>'+(min++)+'</b>').css('left',(i/raz*100)+'%'));
}

$(".polzunok-1").slider({

min: 1,

max: 7,

value: 4,

range: "min",

animate: "fast",

});

var opt = $(".polzunok-1").data().uiSlider.options,

min = opt.min,

raz = opt.max - min;

for (var i = 0; i <= raz; i++) {

$(".polzunok-1").append($('<b>'+(min++)+'</b>').css('left',(i/raz*100)+'%'));

}

.polzunok-container-1 * {
	box-sizing: border-box;
	outline: none;
}
.polzunok-container-1 {
	padding: 10px 21px;
}
.polzunok-container-1 .ui-slider {
	position: relative;
	background: #BFE2FF;
	height: 16px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.2);
}
.polzunok-container-1 .ui-slider .ui-slider-handle,
.polzunok-container-1 .polzunok-1 b
{
    position: absolute;
    margin-left: -21px;
    text-align: center;
	width: 42px;
	height: 42px;
	font-size: 18px;
	padding-top: 7px;
	cursor: pointer;
	border-radius: 100%;
	border: 4px solid #BFE2FF;
	top: -14px;
	background: #FFF;
	z-index: 2;
	color: #000;	
	box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.2);
}
.polzunok-container-1 .ui-slider .ui-slider-handle {
	z-index: 3;
	border: 4px solid #337AB7;
	box-shadow: none;
	background: transparent;
}
.polzunok-container-1 .ui-slider .ui-slider-range {
	position: absolute;
	z-index: 1;
	height: 16px;
	display: block;
	border: 0;
	background: #337AB7;
}
.polzunok-container-1 .ui-slider-horizontal .ui-slider-range-min {
	left: 0;
}
.polzunok-container-1 .ui-slider-horizontal .ui-slider-range-max {
	right: 0;	
}

.polzunok-container-1 * {

box-sizing: border-box;

outline: none;

}

.polzunok-container-1 {

padding: 10px 21px;

}

.polzunok-container-1 .ui-slider {

position: relative;

background: #BFE2FF;

height: 16px;

box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.2);

}

.polzunok-container-1 .ui-slider .ui-slider-handle,

.polzunok-container-1 .polzunok-1 b

{

position: absolute;

margin-left: -21px;

text-align: center;

width: 42px;

height: 42px;

font-size: 18px;

padding-top: 7px;

cursor: pointer;

border-radius: 100%;

border: 4px solid #BFE2FF;

top: -14px;

background: #FFF;

z-index: 2;

color: #000;

box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.2);

}

.polzunok-container-1 .ui-slider .ui-slider-handle {

z-index: 3;

border: 4px solid #337AB7;

box-shadow: none;

background: transparent;

}

.polzunok-container-1 .ui-slider .ui-slider-range {

position: absolute;

z-index: 1;

height: 16px;

display: block;

border: 0;

background: #337AB7;

}

.polzunok-container-1 .ui-slider-horizontal .ui-slider-range-min {

left: 0;

}

.polzunok-container-1 .ui-slider-horizontal .ui-slider-range-max {

right: 0;

}

Вариант 2

Данный пример подходит к большим значениям вводимых данных

<div class="polzunok-container-2">
	<div class="polzunok-2"></div>
</div>

</div>

$(".polzunok-2").slider({
    min: 0,
    max: 500,
    value: 200,
    range: "min",
    animate: "fast",
    slide : function(event, ui) {    
		$(".polzunok-2 span").html("<b>&lt;</b>" + ui.value + "<b>&gt;</b>");        
    }	
});
$(".polzunok-2 span").html("<b>&lt;</b>" + $(".polzunok-2").slider("value") + "<b>&gt;</b>");

$(".polzunok-2").slider({

min: 0,

max: 500,

value: 200,

range: "min",

animate: "fast",

slide : function(event, ui) {

$(".polzunok-2 span").html("<b><</b>" + ui.value + "<b>></b>");

}

});

$(".polzunok-2 span").html("<b><</b>" + $(".polzunok-2").slider("value") + "<b>></b>");

.polzunok-container-2 * {
	box-sizing: border-box;
	outline: none;
}
.polzunok-container-2 {
	padding: 10px 50px;
}
.polzunok-container-2 .ui-slider {
	position: relative;
	background: #BFE2FF;
	height: 12px;
	border-radius:10px;
	box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3), 1px 1px 5px rgba(255, 255, 255, 1);
}
.polzunok-container-2 .ui-slider .ui-slider-handle {
    position: absolute;
    margin-left: -50px;
    text-align: center;
	width: 100px;
	height: 36px;
	font-size: 18px;
	line-height: 18px;
	padding-top: 4px;
	cursor: pointer;
	border-radius: 10px;
	border: 4px solid #BFE2FF;
	top: -13px;
	background: #FFF;
	z-index: 2;
	color: #000;	
	box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.2);
}
.polzunok-container-2 .ui-slider .ui-slider-handle b {
	padding: 0 8px;
	font-family: Courier, monospace;
	color: #BFE2FF;	
}
.polzunok-container-2 .ui-slider .ui-slider-handle:hover b {
	color: #337AB7;	
}
.polzunok-container-2 .ui-slider .ui-slider-range {
	position: absolute;
	z-index: 1;
	height: 12px;
	display: block;
	border: 0;
	background: #337AB7;
	border-radius:10px;
	box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3), 1px 1px 5px rgba(255, 255, 255, 1);
}
.polzunok-container-2 .ui-slider-horizontal .ui-slider-range-min {
	left: 0;
}
.polzunok-container-2 .ui-slider-horizontal .ui-slider-range-max {
	right: 0;	
}

.polzunok-container-2 * {

box-sizing: border-box;

outline: none;

}

.polzunok-container-2 {

padding: 10px 50px;

}

.polzunok-container-2 .ui-slider {

position: relative;

background: #BFE2FF;

height: 12px;

border-radius:10px;

box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3), 1px 1px 5px rgba(255, 255, 255, 1);

}

.polzunok-container-2 .ui-slider .ui-slider-handle {

position: absolute;

margin-left: -50px;

text-align: center;

width: 100px;

height: 36px;

font-size: 18px;

line-height: 18px;

padding-top: 4px;

cursor: pointer;

border-radius: 10px;

border: 4px solid #BFE2FF;

top: -13px;

background: #FFF;

z-index: 2;

color: #000;

box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.2);

}

.polzunok-container-2 .ui-slider .ui-slider-handle b {

padding: 0 8px;

font-family: Courier, monospace;

color: #BFE2FF;

}

.polzunok-container-2 .ui-slider .ui-slider-handle:hover b {

color: #337AB7;

}

.polzunok-container-2 .ui-slider .ui-slider-range {

position: absolute;

z-index: 1;

height: 12px;

display: block;

border: 0;

background: #337AB7;

border-radius:10px;

box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3), 1px 1px 5px rgba(255, 255, 255, 1);

}

.polzunok-container-2 .ui-slider-horizontal .ui-slider-range-min {

left: 0;

}

.polzunok-container-2 .ui-slider-horizontal .ui-slider-range-max {

right: 0;

}

Вариант 3

Для того чтобы рукоятка не выползала за рамки дорожки, можно добавить дополнительную. Дорожка ползунка в данном случае беcцветная, а рукоятка двигается по альтернативной дорожке, которая подкладывается под сладйер

Т.к. дорожка в данном примере получилась широкая, добавим на нее название слайдера или другой текст, который будет менять свое положение в зависимости от положения рукоятки

Вариант 3

<div class="polzunok-container-3">
	<div class="polzunok-3"><b>Вариант 3</b></div>
</div>

<div class="polzunok-3"><b>Вариант 3</b></div>

</div>

$(".polzunok-3").slider({
    min: 0,
    max: 1000,
    value: 600,
    range: "min",
    animate: "fast",
    slide : function(event, ui) {    
		var opt = $(".polzunok-3").data().uiSlider.options;
		if ((ui.value - opt.min) > (opt.max - opt.min)/2) {
			$(".polzunok-3 b").addClass("polzunok-text-left-3").removeClass("polzunok-text-right-3");	
			} else {
			$(".polzunok-3 b").addClass("polzunok-text-right-3").removeClass("polzunok-text-left-3");	
		}
		$(".polzunok-3 span").text(ui.value); 
	}
});
$(".polzunok-3 b").addClass("polzunok-text-left-3");	
$(".polzunok-3").before("<div class='polzunok-bg-3'></div>");
$(".polzunok-3 span").text($(".polzunok-3").slider("value"));

$(".polzunok-3").slider({

min: 0,

max: 1000,

value: 600,

range: "min",

animate: "fast",

slide : function(event, ui) {

var opt = $(".polzunok-3").data().uiSlider.options;

if ((ui.value - opt.min) > (opt.max - opt.min)/2) {

$(".polzunok-3 b").addClass("polzunok-text-left-3").removeClass("polzunok-text-right-3");

} else {

$(".polzunok-3 b").addClass("polzunok-text-right-3").removeClass("polzunok-text-left-3");

}

$(".polzunok-3 span").text(ui.value);

}

});

$(".polzunok-3 b").addClass("polzunok-text-left-3");

$(".polzunok-3").before("<div class='polzunok-bg-3'></div>");

$(".polzunok-3 span").text($(".polzunok-3").slider("value"));

.polzunok-container-3 * {
	box-sizing: border-box;
	outline: none;
}
.polzunok-container-3 {
	padding: 10px 0;
	position: relative;
}
.polzunok-container-3 .polzunok-bg-3 {
	position: absolute;
	background: #BFE2FF;
	height: 32px;
	width:100%;
	box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
}
.polzunok-container-3 .ui-slider {
	position: relative;
	height: 32px;
	width: calc(100% - 80px);
	left: 40px;
}
.polzunok-container-3 .ui-slider b {
	position: absolute;
	font-size:18px;
	padding: 7px 20px;
	z-index:5;
}
.polzunok-container-3 .ui-slider .ui-slider-handle {
    position: absolute;
	margin-left:-40px;
    border: 1px solid #ccc;
    cursor: pointer;
    width: 80px;
    height: 32px;
	padding-top: 7px;
    z-index: 3;
	background: #FFF;
	font-size: 18px;
	text-align: center;
    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
}
.polzunok-container-3 .ui-slider .ui-slider-range {
	position: absolute;
	z-index: 1;
	height: 32px;
	display: block;
	border: 0;
	background: #337AB7;
	box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
}
.polzunok-container-3 .ui-slider-horizontal .ui-slider-range-min, 
.polzunok-text-left-3 {
    left: -40px;
	color: #FFF;
}
.polzunok-container-3 .ui-slider-horizontal .ui-slider-range-max, 
.polzunok-text-right-3 {
    right: -40px;  
	color: #000;
}

.polzunok-container-3 * {

box-sizing: border-box;

outline: none;

}

.polzunok-container-3 {

padding: 10px 0;

position: relative;

}

.polzunok-container-3 .polzunok-bg-3 {

position: absolute;

background: #BFE2FF;

height: 32px;

width:100%;

box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);

}

.polzunok-container-3 .ui-slider {

position: relative;

height: 32px;

width: calc(100% - 80px);

left: 40px;

}

.polzunok-container-3 .ui-slider b {

position: absolute;

font-size:18px;

padding: 7px 20px;

z-index:5;

}

.polzunok-container-3 .ui-slider .ui-slider-handle {

position: absolute;

margin-left:-40px;

border: 1px solid #ccc;

cursor: pointer;

width: 80px;

height: 32px;

padding-top: 7px;

z-index: 3;

background: #FFF;

font-size: 18px;

text-align: center;

background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));

}

.polzunok-container-3 .ui-slider .ui-slider-range {

position: absolute;

z-index: 1;

height: 32px;

display: block;

border: 0;

background: #337AB7;

box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);

}

.polzunok-container-3 .ui-slider-horizontal .ui-slider-range-min,

.polzunok-text-left-3 {

left: -40px;

color: #FFF;

}

.polzunok-container-3 .ui-slider-horizontal .ui-slider-range-max,

.polzunok-text-right-3 {

right: -40px;

color: #000;

}

Вариант 4

В данном примере со стрелками используется шрифт FontAwesome. Если он не подключен на сайте, нужно в JS заменить стрелки <i class='fa fa-chevron-left'></i> и <i class='fa fa-chevron-right'></i> на другие.

<div class="polzunok-container-4">
	<div class="polzunok-4"></div>
</div>

</div>

$(".polzunok-4").slider({
    min: 0,
    max: 10,
    value: 5,
    range: "min",
    animate: "fast",
    slide : function(event, ui) {    
		$(".polzunok-4 span").text(ui.value);        
	},	
    change : function(event, ui) {    
		$(".polzunok-4 span").text(ui.value);       
	}	
});
$(".polzunok-4 span").text($(".polzunok-4").slider("value"));   
$(".polzunok-4")
	.before("<div class='polzunok-4-left'><i class='fa fa-chevron-left'></i></div>")
	.before("<div class='polzunok-bg-4'></div>")
	.after("<div class='polzunok-4-right'><i class='fa fa-chevron-right'></i></div>");
$(".polzunok-4-left").click(function() {
	$(".polzunok-4").slider( "value", $(".polzunok-4").slider( "value" ) - 1 );
});
$(".polzunok-4-right").click(function() {
	$(".polzunok-4").slider( "value", $(".polzunok-4").slider( "value" ) + 1 );
});

$(".polzunok-4").slider({

min: 0,

max: 10,

value: 5,

range: "min",

animate: "fast",

slide : function(event, ui) {

$(".polzunok-4 span").text(ui.value);

change : function(event, ui) {

$(".polzunok-4 span").text(ui.value);

}

});

$(".polzunok-4 span").text($(".polzunok-4").slider("value"));

$(".polzunok-4")

.before("<div class='polzunok-4-left'><i class='fa fa-chevron-left'></i></div>")

.before("<div class='polzunok-bg-4'></div>")

.after("<div class='polzunok-4-right'><i class='fa fa-chevron-right'></i></div>");

$(".polzunok-4-left").click(function() {

$(".polzunok-4").slider( "value", $(".polzunok-4").slider( "value" ) - 1 );

});

$(".polzunok-4-right").click(function() {

$(".polzunok-4").slider( "value", $(".polzunok-4").slider( "value" ) + 1 );

});

.polzunok-container-4 {
	margin: 30px;
	position: relative;
}
.polzunok-container-4:after {
	content: "";
	clear: both;
	display: table;
}
.polzunok-4-left,
.polzunok-4-right {
	width:60px;
	height:60px;
	font-size: 60px;
	line-height: 60px;
	text-align:center;
	color: #337AB7;
	cursor: pointer;
	float: left;
	position: relative;
	z-index: 6;
	transition: color 0.3s ease-in-out;
}
.polzunok-4-left:hover,
.polzunok-4-right:hover {
	color: #000;
}
.polzunok-container-4 .polzunok-bg-4 {
	position: relative;
	top: 16px;
	background: #BFE2FF;
	height: 28px;
	width: calc(100% - 120px);
	float: left;
}
.polzunok-container-4 .polzunok-bg-4:after,
.polzunok-container-4 .polzunok-bg-4:before {
	content: "";
	height: 0;
	width: 0;
	border: 14px solid transparent;
	border-left-color: #BFE2FF;
	right: -28px;
	position: absolute;
}
.polzunok-container-4 .polzunok-bg-4:before {
	border-right-color: #337AB7;
	border-left-color: transparent;
	left: -28px;
}
.polzunok-container-4 .ui-slider {
	position: absolute;
	top: 16px;
	height: 28px;
	width: calc(100% - 180px);
	left: 90px;
}
.polzunok-container-4 .ui-slider .ui-slider-handle {
    position: absolute;
	margin-left:-30px;
    cursor: pointer;
    width: 60px;
    height: 28px;
	line-height: 28px;
    z-index: 3;
	background: #FFF;
	background: #337AB7;
	font-size: 18px;
	text-align:center;
	color: #FFF;
}
.polzunok-container-4 .ui-slider .ui-slider-handle:after,
.polzunok-container-4 .ui-slider .ui-slider-handle:before {
	content: "";
	height: 0;
	width: 0;
	border: 14px solid transparent;
	border-left-color: #337AB7;
	right: -28px;
	position: absolute;
	z-index: 4;
}
.polzunok-container-4 .ui-slider .ui-slider-handle:before {
	border-right-color: #337AB7;
	border-left-color: transparent;
	left: -28px;
}
.polzunok-container-4 .ui-slider .ui-slider-range {
	position: absolute;
	z-index: 1;
	height: 28px;
	display: block;
	border: 0;
	background: #337AB7;
}
.polzunok-container-4 .ui-slider-horizontal .ui-slider-range-min {
    left: -30px;
}
.polzunok-container-4 .ui-slider-horizontal .ui-slider-range-max {
    right: -30px;  
}

100

101

.polzunok-container-4 {

margin: 30px;

position: relative;

}

.polzunok-container-4:after {

content: "";

clear: both;

display: table;

}

.polzunok-4-left,

.polzunok-4-right {

width:60px;

height:60px;

font-size: 60px;

line-height: 60px;

text-align:center;

color: #337AB7;

cursor: pointer;

float: left;

position: relative;

z-index: 6;

transition: color 0.3s ease-in-out;

}

.polzunok-4-left:hover,

.polzunok-4-right:hover {

color: #000;

}

.polzunok-container-4 .polzunok-bg-4 {

position: relative;

top: 16px;

background: #BFE2FF;

height: 28px;

width: calc(100% - 120px);

float: left;

}

.polzunok-container-4 .polzunok-bg-4:after,

.polzunok-container-4 .polzunok-bg-4:before {

content: "";

height: 0;

width: 0;

border: 14px solid transparent;

border-left-color: #BFE2FF;

right: -28px;

position: absolute;

}

.polzunok-container-4 .polzunok-bg-4:before {

border-right-color: #337AB7;

border-left-color: transparent;

left: -28px;

}

.polzunok-container-4 .ui-slider {

position: absolute;

top: 16px;

height: 28px;

width: calc(100% - 180px);

left: 90px;

}

.polzunok-container-4 .ui-slider .ui-slider-handle {

position: absolute;

margin-left:-30px;

cursor: pointer;

width: 60px;

height: 28px;

line-height: 28px;

z-index: 3;

background: #FFF;

background: #337AB7;

font-size: 18px;

text-align:center;

color: #FFF;

}

.polzunok-container-4 .ui-slider .ui-slider-handle:after,

.polzunok-container-4 .ui-slider .ui-slider-handle:before {

content: "";

height: 0;

width: 0;

border: 14px solid transparent;

border-left-color: #337AB7;

right: -28px;

position: absolute;

z-index: 4;

}

.polzunok-container-4 .ui-slider .ui-slider-handle:before {

border-right-color: #337AB7;

border-left-color: transparent;

left: -28px;

}

.polzunok-container-4 .ui-slider .ui-slider-range {

position: absolute;

z-index: 1;

height: 28px;

display: block;

border: 0;

background: #337AB7;

}

.polzunok-container-4 .ui-slider-horizontal .ui-slider-range-min {

left: -30px;

}

.polzunok-container-4 .ui-slider-horizontal .ui-slider-range-max {

right: -30px;

}

Вариант 5

Последний пример с двумя рукояткамии и полями для ввода данных.

Слайдер сделан таким образом, чтобы нельзя было ввести невозможные значения данных, а именно:

Значение первого поля для ввода не может быть больше, чем значение второго и меньше, чем задано настройками
Значение второго поля для ввода не может быть меньше, чем значение первого и больше, чем задано настройками
Из полей ввода удаляются все символы кроме цифр

Обработка введенных данных и расстановка рукояток происходит, когда форма не в фокусе.

<div class="polzunok-container-5">
	<input type="text" class="polzunok-input-5-left" />
	<input type="text" class="polzunok-input-5-right "/>
	<div class="polzunok-5"></div>
</div>

</div>

$(".polzunok-5").slider({
    min: 0,
    max: 5000,
    values: [2000, 3000],
    range: true,
    animate: "fast",
    slide : function(event, ui) {    
		$(".polzunok-input-5-left").val(ui.values[ 0 ]);   
		$(".polzunok-input-5-right").val(ui.values[ 1 ]);  
	}	
});
$(".polzunok-input-5-left").val($(".polzunok-5").slider("values", 0));
$(".polzunok-input-5-right").val($(".polzunok-5").slider("values", 1));
$(".polzunok-container-5 input").change(function() {
	var input_left = $(".polzunok-input-5-left").val().replace(/[^0-9]/g, ''),	
	opt_left = $(".polzunok-5").slider("option", "min"),
	where_right = $(".polzunok-5").slider("values", 1),
	input_right = $(".polzunok-input-5-right").val().replace(/[^0-9]/g, ''),	
	opt_right = $(".polzunok-5").slider("option", "max"),
	where_left = $(".polzunok-5").slider("values", 0); 
	if (input_left > where_right) { 
		input_left = where_right; 
	}
	if (input_left < opt_left) {
		input_left = opt_left; 
	}
	if (input_left == "") {
	input_left = 0;	
	}		
	if (input_right < where_left) { 
		input_right = where_left; 
	}
	if (input_right > opt_right) {
		input_right = opt_right; 
	}
	if (input_right == "") {
	input_right = 0;	
	}	
	$(".polzunok-input-5-left").val(input_left); 
	$(".polzunok-input-5-right").val(input_right); 
	if (input_left != where_left) {
		$(".polzunok-5").slider("values", 0, input_left);
	}
	if (input_right != where_right) {
		$(".polzunok-5").slider("values", 1, input_right);
	}
});

$(".polzunok-5").slider({

min: 0,

max: 5000,

values: [2000, 3000],

range: true,

animate: "fast",

slide : function(event, ui) {

$(".polzunok-input-5-left").val(ui.values[ 0 ]);

$(".polzunok-input-5-right").val(ui.values[ 1 ]);

}

});

$(".polzunok-input-5-left").val($(".polzunok-5").slider("values", 0));

$(".polzunok-input-5-right").val($(".polzunok-5").slider("values", 1));

$(".polzunok-container-5 input").change(function() {

var input_left = $(".polzunok-input-5-left").val().replace(/[^0-9]/g, ''),

opt_left = $(".polzunok-5").slider("option", "min"),

where_right = $(".polzunok-5").slider("values", 1),

input_right = $(".polzunok-input-5-right").val().replace(/[^0-9]/g, ''),

opt_right = $(".polzunok-5").slider("option", "max"),

where_left = $(".polzunok-5").slider("values", 0);

if (input_left > where_right) {

input_left = where_right;

}

if (input_left < opt_left) {

input_left = opt_left;

}

if (input_left == "") {

input_left = 0;

}

if (input_right < where_left) {

input_right = where_left;

}

if (input_right > opt_right) {

input_right = opt_right;

}

if (input_right == "") {

input_right = 0;

}

$(".polzunok-input-5-left").val(input_left);

$(".polzunok-input-5-right").val(input_right);

if (input_left != where_left) {

$(".polzunok-5").slider("values", 0, input_left);

}

if (input_right != where_right) {

$(".polzunok-5").slider("values", 1, input_right);

}

});

.polzunok-container-5 * {
	box-sizing: border-box;
	outline: none;
}
.polzunok-container-5 {
	padding: 10px 16px;
	margin: 30px;
}
.polzunok-container-5:after {
	content: "";
	clear: both;
	display: table;
}
.polzunok-container-5 .ui-slider {
	position: relative;
	background: #BFE2FF;
	height: 10px;
	border-radius:10px;
	box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2), 1px 1px 5px rgba(255, 255, 255, 1);
}
.polzunok-container-5 .ui-slider .ui-slider-handle {
    position: absolute;
    margin-left: -16px;
	width: 32px;
	height: 32px;
	cursor: pointer;
	border-radius: 50%;
	border: 4px solid #BFE2FF;
	top: -11px;
	background: #FFF;
	z-index: 2;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.2);
	transition: transform 0.2s, border 0.4s;
}
.polzunok-container-5 .ui-slider .ui-slider-handle:hover,
.polzunok-container-5 .ui-slider .ui-slider-handle:focus {
	transform: scale(1.2);
	border: 4px solid #337AB7;
}
.polzunok-input-5-left,
.polzunok-input-5-right {
	height: 32px;
	background: #FFF;
	border-radius: 28px;
	border: 4px solid #BFE2FF;
	text-align:center;
	font-size: 18px;
	padding: 16px;
	width: 140px;
	margin-top:30px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.2);
}
.polzunok-input-5-left {
	float: left;
}
.polzunok-input-5-right {
	float: right;
}
.polzunok-container-5 .ui-slider .ui-slider-range {
	position: absolute;
	z-index: 1;
	height: 10px;
	border: 0;
	background: #337AB7;
	border-radius:10px;
	box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3), 1px 1px 5px rgba(255, 255, 255, 1);
}

.polzunok-container-5 * {

box-sizing: border-box;

outline: none;

}

.polzunok-container-5 {

padding: 10px 16px;

margin: 30px;

}

.polzunok-container-5:after {

content: "";

clear: both;

display: table;

}

.polzunok-container-5 .ui-slider {

position: relative;

background: #BFE2FF;

height: 10px;

border-radius:10px;

box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2), 1px 1px 5px rgba(255, 255, 255, 1);

}

.polzunok-container-5 .ui-slider .ui-slider-handle {

position: absolute;

margin-left: -16px;

width: 32px;

height: 32px;

cursor: pointer;

border-radius: 50%;

border: 4px solid #BFE2FF;

top: -11px;

background: #FFF;

z-index: 2;

box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.2);

transition: transform 0.2s, border 0.4s;

}

.polzunok-container-5 .ui-slider .ui-slider-handle:hover,

.polzunok-container-5 .ui-slider .ui-slider-handle:focus {

transform: scale(1.2);

border: 4px solid #337AB7;

}

.polzunok-input-5-left,

.polzunok-input-5-right {

height: 32px;

background: #FFF;

border-radius: 28px;

border: 4px solid #BFE2FF;

text-align:center;

font-size: 18px;

padding: 16px;

width: 140px;

margin-top:30px;

box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.2);

}

.polzunok-input-5-left {

float: left;

}

.polzunok-input-5-right {

float: right;

}

.polzunok-container-5 .ui-slider .ui-slider-range {

position: absolute;

z-index: 1;

height: 10px;

border: 0;

background: #337AB7;

border-radius:10px;

box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3), 1px 1px 5px rgba(255, 255, 255, 1);

}

Я не стал описывать как работают те или иные строчки в коде. Поэтому если у вас возникнут какие-нибудь вопросы, или вы найдете ошибки - напишите об этом в комментариях.

Подписывайтесь на публикации Там наиболее интересные заметки без рекламы и другой ненужной информации.

Протестировать на мобильном Сгенерировать QR-код для перехода на эту страницу с телефона

Опубликовано: 06.05.2018 / Обновлено: 17.12.2022
Рубрики: Слайдеры и карусели, Формы
Метки: CSS, jQuery, jQuery UI, Авторское
29952 просмотра

Вывод заданных блоков при изменении элементов формы radio, checkbox и select

Слайдер с фиксированным текстом

Слайдер на jQuery с фиксированной текстовой информацией и листающимися изображениями

Гармошка из фотографий на jQuery

Плагин jQuery splits-slider Plugin для создания горизонтального аккордеона фотографий

Добавить комментарий:

Ваш комментарий отправлен!

Герман: 30.10.2022 в 15:47

Прошу помогите пожалуйста, вылазит ошибка "Uncaught ReferenceError: $ is not defined" js работает, я проверил, это проблема в коде наверное

Ответить
- Alexander: 01.11.2022 в 11:30
  Проблема в jQuery, она или не правильно подключена или, например, если WP, подключать нужно так:
  
  jQuery(document).ready(function($) { // Тут код ползунков });
  Ответить
Федор: 09.06.2022 в 20:18

Александр, спасибо огромное за ваши труды и примеры)

Ответить
Неизвестный: 14.03.2022 в 13:27

Спасибо огромное

Ответить
Владимир: 19.02.2021 в 15:02

Как можно в 5 варианте установить ограничения для ползунков? Например: левый - не больше 3000, правый - не меньше 2000.
И огромное спасибо за классный сайт!

Ответить
- Alexander: 19.02.2021 в 19:20
  
  Примерно так
  
  Ответить
SPR1NG9: 04.02.2021 в 18:11

А если я в 5 примере хочу своё значение в инпуты, но хочу чтоб ползунки всё равно перемещались. Грубо какой код отвечает за само перемещение ползунков

Ответить
- Alexander: 04.02.2021 в 18:38
  Не понял вообще, что значит "свое значение"
  За перемещение ползунка при вводе данных вручную отвечает
  
  $(".polzunok-5").slider("values", 0, input_left);
  
  и
  
  $(".polzunok-5").slider("values", 1, input_right);
  
  А вообще, напишите лучше в ВК мне, думаю проще будет 🙂
  Ответить
Олег: 10.11.2020 в 17:05

Если в вариант 5 в окнах ввода проставить значения 5000 то ползунок после этого не передвинуть

Ответить
- Alexander: 10.11.2020 в 19:06
  
  Исправил
  
  Ответить
  - Олег: 11.11.2020 в 19:49
    
    Спасибо большое!
    
    Ответить
Евгений: 08.11.2020 в 23:20

Александр, еще хотел уточнить: как сделать сброс выбранных значений в начальные кнопкой без перезагрузки страницы? Заранее спасибо за ответы.

Ответить
- Alexander: 09.11.2020 в 09:48
  
  Это сюда: jQuery UI Slider - Методы (Установка значений для рукояток)
  И привязать это на клик по какой нибудь кнопки
  
  Ответить
  - Евгений: 09.11.2020 в 10:14
    
    Просто начинаю изучать, знаний минимум, поэтому интересуют "живые примеры".
    
    Ответить
  - Евгений: 09.11.2020 в 15:50
    
    со сбросом по кнопке разобрался
    
    $("#reset").click( function(){ $(".polzunok-input-left").val(from); $(".polzunok-input-right").val(to); $(".polzunok").slider( "values", [ min, max ] ); });
    
    Ответить
Евгений: 08.11.2020 в 23:16

Интересный слайдер, но при переходе по страницам категории /page/ /page/2/ /page/3/ и т.д. выбранные данные теряются и выставляются начальные значения.
Как возможно запомнить выставленные данные при переходе по сайту в пределах одной категории?

Ответить
- Alexander: 09.11.2020 в 09:44
  
  А для чего нужно такую форму гнать по всем страницам, если не секрет?
  
  А вообще, можно писать куки при каждом изменении ползунка и при их наличии на другой странице выставлять в начальные.
  Или строить ссылку на страницу в зависимости от выбранных данных и потом по ней выставлять слайдер этот.
  
  Ответить
  - Евгений: 09.11.2020 в 10:11
    
    Фильтр такой нужен для фильтрации пользователем определенного диапазона, например цены (в моем случае километража). Если в выборке получается на несколько десятков позиций, просто неудобно их все просмотреть на странице и приходится делать пагинацию, например по 10 или 20 позиций.
    Насчет куков можно поподробнее? За живой пример дополнительное спасибо
    
    Ответить
    - Alexander: 09.11.2020 в 16:55
      
      Фильтр такой нужен для фильтрации пользователем определенного диапазона, например цены (в моем случае километража)
      
      Ну это я думаю не просто так делается...
      Человек фильтрует, далее идет запрос, по нему выводятся соотв. позиции и вместе с ними должны выводиться страницы. Если по фильтрам нашлось, например, 30 позиций, то мы выводим 20, показываем 2 страницы, и ссылка на вторую соотв. получается не /page/2/, а что-то вида /page/2/?cat-1&filter1=10&filter2=20&filter3=30 и т.д.
      И на основе этих данных будет строится вторая страница и соотв. этот фильтр.
      
      Или каким то другим образом движок строит систему фильтров... Надо от этого отталкиваться думаю, а не просто придумать как ползунок сохранить на месте.
      
      Ответить
      - Евгений: 09.11.2020 в 17:14
        
        я в ручном порядке добавляю переменные в запрос - все выводится как надо. у меня проблема как вытащить значения ползунков и передать их в php-переменные...
        Если это сделать, то остальное все будет работать как надо.
        
        Ответить
        
        Alexander: 09.11.2020 в 17:57
        
        Ну так сложно судить...
        Если параметрыпередаются и все выводится, то на их основе можно выводить новый скрипт, в котором начальное значение уже другое.
        
        Ответить
        
        Евгений: 09.11.2020 в 18:12
        
        Параметры вывожу в инпутах, но передать их не могу . В этом сложности. Не могу понять как это сделать.
        
        Alexander: 09.11.2020 в 18:17
        
        Так если параметры не передаются, как на их основе что то выводится?
        Или "В ручном порядке" - это просто от руки в урл их вписать?
        
        Евгений: 09.11.2020 в 18:36
        
        да, я вписываю вручную переменные и тогда все работает, но как их вытащить из скрипта я не знаю. в этом прошу помощи - как можно это сделать?
        
        Alexander: 09.11.2020 в 18:47
        
        Напишите завтра в ВК
        Посмотрим что есть и что надо.
        Так проще будет рассказать что куда.
        
        Евгений: 10.11.2020 в 15:15
        
        я не пользуюсь соцсетями... если возможно через почту, то мой адрес должны видеть
Александр: 19.05.2020 в 18:40

Первый вариант отображается с пустотой внутри кружков(ни нумерации, ни белого фона), может что-то не так со стилями?
Подключил всё правильно

Ответить
- Alexander: 19.05.2020 в 22:27
  
  Скорее всего со стилями, а можно ссылку на результат этот?
  
  Ответить
  - Александр: 22.05.2020 в 01:30
    
    https://codepen.io/codeine98/pen/JjYxMpw?editors=1100
    
    Ответить
  - Александр: 22.05.2020 в 01:35
    
    Вопрос снят, нужна была более свежая версия JQuery. Я использовал 2.1.3, а после подключения последней на данный момент (3.5.1) всё отобразилось как на примере.
    
    Ответить
Алексей: 30.04.2019 в 14:43

Чувак, просто СПАСИБО!

Ответить
- Alexander: 30.04.2019 в 15:57
  
  Не за что 🙂
  Рад что многим пригодилось
  
  Ответить
Дмитрий: 16.03.2019 в 01:25

Спасибо за статью. Хочу узнать как к примеру в пятый пример добавить знак ₽ после значения стоимости, как я понимаю его нужно в js добавить?

Ответить
- Alexander: 18.03.2019 в 12:04
  
  Попробуйте:
  https://atuin.ru/test/slderRUB.js
  Пример:
  https://atuin.ru/test/slderRUB.html
  
  Ответить
Константин: 30.11.2018 в 14:46

Спасибо! Классно и быстро прикрутил, но вот вопрос - По варианту 5, как доработать чтобы пробелы между тысячами вставлялось?
15 000 000

Ответить
- Alexander: 02.12.2018 в 18:35
  
  Попробуйте:
  https://atuin.ru/test/toLocaleString.js
  
  Ответить
Максим: 07.11.2018 в 20:12

У вас написано:
Обработка введенных данных и расстановка рукояток происходит по клику на любом месте страницы.

а как сделать чтобы данные и рукоятки обрабатывались мгновенно при вводе?

Ответить
- Alexander: 09.11.2018 в 14:14
  
  Я так понял это про 5 вариант?
  
  Я вначале так и сделал, чтобы мгновенно данные менялись, но тут есть 1 проблема.
  Если первая рукоятка стоит, например на 600 и вы начинаете вводить данные во вторую (хотите ввести 1000), то написав 1, рукоятка сразу улетает на 600 (т.к. 1 быть не может).
  И соотв, вписать 1000 во вторую рукоятку вы не сможете.
  
  Ответить
Юрий: 26.09.2018 в 13:27

Спасибо за примеры, очень часто возникает потребность в 5 варианте, при создании фильтров.

Ответить

Установка плагина

Вариант 1

Вариант 2

Вариант 3

Вариант 4

Вариант 5

Смотрите также:

Добавить комментарий:

Комментарии: