range2dSlider плагин на jQuery ​Вновь статья в названии содержит громогласное «самый лучший». Время показало, что когда я рассказывал про datetimepicker, эти слова оказались верны. Сейчас я более чем уверен, jQuery плагин range2DSlider придется многим по вкусу.

Море настроек конфигурации делают этот плагин одним из лучших в своем роде. Просто взгляните, на что он способен:

 

Та, конфигурация, для которой он был создан 2d слайдер

Показать код

Или обычный range слайдер (ползунок), альтернатива нативному input type="range", но с поддержкой нескольких значений

Показать код

Вертикальный вариант исполнения, того же ползунка input type="range"

 

Показать код

В подсказке над(под/слева/справа) ползунком можно выводить не только текущие значения. Все кастомизируется довольно просто

Показать код

Не нравится внешний вид? Я старался, честно! Ну что же, добавим своих стилей, и легким движением руки, брюки превращаются...

Показать код

Все что вы увидели выше не строго зашито в слайдер, а является сочетанием определенных настроек. Можно создать конфигурации на все случаи жизни. Под катом описание настроек и их конфигураций, а заинтересовавшиеся могут сразу скачать плагин и поковырять его сами

Настройки

Двумерный массив значений осей по вертикали и по горизонтали. Может содержать как начальное и конечное значение, так и промежуточные
$('.slider1').range2DSlider({
	axis:[
		[-10,-5,0,5,10],
		[-10,10]
	]
});
 

Результат

Используется для задания значений всем бегункам. Количество бегунков не ограничено. Каждому бегунку передается значение по горизонтали и по вертикали. Помимо этого значение может быть задано через атрибут value элемента в формате «0|0;5|5;1|6»
$('.slider2').range2DSlider({
	value:[
		[0,0],
		[5,5],
		[1,6],
		[9,9],
		[10,10]
	]
});
 

Результат

Показывать проекции на оси координат. Может быть как массивом, где каждый элемент будет соответствовать ползунку, так и одним значением.
По умолчанию: false
$('.slider3').range2DSlider({
	projections:true
});
 

Результат

Двумерный массив, элементы которого это пара номеров ползунков, которые нужно соединить и показать это в слайдере
По умолчанию: false
$('.slider4').range2DSlider({
	value:[[1,0],[5,0]],//будет два ползунка
	showRanges:[[0,1]], 	//соединяем эти два ползунка
	template:'horizontal' //это не настройка а конфигурация настроек, 
	//для упрощения работы с плагином 
});
 

Результат

К классам главного div плагина добавится 'xdsoft_range2dslider_'+skin1. Данный класс применяется для кастомизации внешнего вида. Пока, в плагине всего один скин: «xdsoft_range2dslider_skin1», но с временем добавим еще.
По умолчанию: "skin1"
$('.slider5').range2DSlider({
	skin:'myskin'
});
 
Служит для тех же целей что и skin. Добавляет к слайдеру произвольный класс
По умолчанию: ""
$('.slider5').range2DSlider({
	className:'myclass myclass2'
});
 
Служит для тех же целей что и skin но добавляет к слайдеру произвольный набор стилей
По умолчанию: ""
$('.slider6').range2DSlider({
	value:[[0,5]],
	showRanges:[[0,1]],
	style:'float:left;margin-left:25px;',
	axis:[[0,1],[0,10]],
	template:'vertical'
});

Результат

 
Высота слайдера
По умолчанию: "100px"
$('.slider7').range2DSlider({
	height:'10px'
});
 
Ширина слайдера
По умолчанию: "auto"
$('.slider8').range2DSlider({
	width:'30%'
});
 
Очень важная настройка. Служит для ориентации плагина по оси X. Откуда начинать отсчет слева(left) или справа(right)
По умолчанию: "left"
 
Ориентация по оси Y. Сверху вниз(top) либо снизу вверх (bottom)
По умолчанию: "bottom"
$('.slider9').range2DSlider({
	x:'right',
	y:'top'
});

Результат

 
Если false, то при клике на пустом месте в слайдере, последний активный ползунок не переместится в место клика
По умолчанию: true
 
Показывать сетку
По умолчанию: true
 
Массив из двух элементов: 1 - шаг по оси X, 2 - шаг по оси Y в пикселах. Если false, то вычисляется автоматически, по пределам из axis
По умолчанию: false
 
Стиль для линий сетки. Ширина линий, цвет и промежутки
По умолчанию:
{
	width:0.5,
	color:'#888',
	dashed:[5,2]
}
$('.slider10').range2DSlider({
	grid:true,
	gridStep:[40,40],
	gridStyle:{
		width:1.5,
		color:'red',
		dashed:[1,2]
	}
});
 

Результат

 
Округлять ли значения
По умолчанию: false
 
Метод для округления
По умолчанию: Math.round
$('.slider11').range2DSlider({
 round:true,
 roundMethod:function(val){return val>4?5:3;}
});
 
Показывать ли цифры на осях.
По умолчанию: [true,true]
$('.slider').range2DSlider({
 showLegend:false,
});
 
Значения на осях просчитываются и расставляются только при первом вызове range2DSlider для элемента. Если требуется повторный просчет, то надо установить в true
По умолчанию: false
$('.slider').range2DSlider({
 	showLegend:[true,false]
});
$('.slider').range2DSlider({
 	showLegend:[false,false],
recalcLegends:true
});
 
Показывать ли (а если показывать то где) значение рядом с ползунком. Можно указать одно значение для всех, либо для каждого ползунка по отдельности.
По умолчанию: ['top']
 
Всегда ли показывать tooltip. При false будет показано только при наведении
По умолчанию: [true]
$('.slider').range2DSlider({
 tooltip:['top','right','bottom','left'],
 value:[[2,5],[4,5],[6,5],[8,5]],
 alwShowTooltip:[true,true,true,false]
});
 

Результат

 
Привязывать значения к точкам пересечений целых значений осей. Работает только при round=true
По умолчанию: false
$('.slider').range2DSlider({
 template:'horizontal',
 round:true,
 onlyGridPoint:true
});
 

Результат

 
Позволять значениям выходить за пределы заданных в axis. Если false и значение по оси больше максимального в axis, то значению присваивается максимальное из axis. Это не относится к Drag&Drop.
По умолчанию: false
 
Важная настройка. По какой оси позволено изменять положение ползунка.
По умолчанию: 'both'
$('.slider').range2DSlider({
value:[[1,1],[3,3],[5,5]],
allowAxisMove:['x','y','both']
});
 

Результат

 
Метод который возвращает то, что будет выведено в tooltip.
По умолчанию:
function( value ){
				return value[0].toFixed(2)+'-'+value[1].toFixed(2)
}
В this в него подается DOM элемент ползунка. Используя его можно обратится к его дочерним элементам: tooltip или к проекциям
$('.slider').range2DSlider({
value:[5,5],
projections:true,
printLabel:function( val ){
 this.projections
  &&this.projections[0]
   .find('.xdsoft_projection_value_x')
    .text(val[1].toFixed(5));
 return val[0].toFixed(5);
}
});
 

Результат

 
Метод который возвращает то, что будет записано в атрибут value исходного input.
По умолчанию метод возвращает подобную структуру: 0|1;3|7;19.56|7
$('.slider').range2DSlider({
printValue:function( val ){
 return val[0].toFixed(5);
}
});
 
Настройка для запрета изменения значений
По умолчанию: false
 
При клике по любому ползунку либо при переходе на него по клавише tab он становится текущим активным. После этого, его положение может быть изменено при помощи стрелок клавиатуры. В stepOnKeyNavigate лежит расстояние на которое смещается ползунок при нажатии одной из клавиш
По умолчанию: 0.1
 
Любому ползунку, также можно присвоить произвольный класс, и назначить этому классу особые стили.
По умолчанию:['skin1','skin1']
 
Рассказать друзьям

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


Защитный код
Обновить

Комментарии   

0
Anjutochka
# Anjutochka 23.07.2014 02:48
Зачем запретил копирование? Фрагменты приходится шлепать, либо с первоисточника копировать и вставлять. А защита такая только от чайника спасет.
0
Leroy
# Leroy 23.07.2014 11:39
что запретил?
0
Cywiluga
# Cywiluga 10.08.2014 05:03
дьдььд
0
Сергей123321
# Сергей123321 29.03.2015 17:16
Как в слайдере (ползунок), с поддержкой 2х значений вывести в форме через input две переменные чтобы с ними можно было работать ?