Самый лучший range slider на jQuery

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

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

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

Показать код

$('#slider').range2DSlider({
    grid:false,
    axis:[[0,2,5,7,10],[0,5,10]],
    projections:true,
    showLegend:[1,1],
    allowAxisMove:['both'],
    printLabel:function( val ){
      this.projections&&this.projections[0].find('.xdsoft_projection_value_x').text(val[1].toFixed(5));
      return val[0].toFixed(5);
    }
  })
.range2DSlider('value',[[1,4],[3,1],[6,6]]);

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

Показать код

$('#slider').range2DSlider({
	template:'horizontal',
	value:[[5,0],[7,0]],
	onlyGridPoint:true,
	round:true,
	axis:[[-3,-2,-1,0,1,2,3,4,5,6,7,8,9,10]]
});

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

Показать код

$('#slider').range2DSlider({
    template:'vertical',
    value:[[0,5]],
    showRanges:[[0,1]],
    style:'float:left;margin-left:25px;',
    axis:[[0,1],[0,10]],
    round:true,
    printLabel:function( val ){
		return val[1]+' yo';
	}
});

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

Показать код

<input class="slider31">
<script>
  var values = [];
  var ranges = [];
  var cities = [
    'Abuja',
    'Accra',
    'Adamstown',
    'Addis',
    'Algiers',
    'Alofi',
    'Amman',
    'Amsterdam',	
    'Andorra',
    'Ankara',
    'Antananarivo',	
    'Apia',
    'Ashgabat',	
    'Asmara',
    'Astana',
    'Asuncion',	
    'Athens',
    'Avarua',
    'Baghdad',	
    'Baku',
    'Bamako',	
    'Bandar',
    'Bangkok',	
    'Bangui',
    'Banjul',
    'Basseterre',	
    'Beijing',
    'Beirut',
    'Belgrade',	
    'Belmopan'
  ];
  for(var i = -10,k=0;i<=10;i++,k++ ){
    values.push([i,Math.sin(i),cities[i+10]]);
    if( i<10 )
      ranges.push([k,k+1]);
  }	
  $('.slider31').range2DSlider({
    x:'right',
    y:'top',
    style:'margin-top:50px;',
    showLegend:[0,0],
    showRanges:ranges,
    axis:[[-10,10],[-1.5,1.5]],
    allowAxisMove:['y'],
    printLabel:function( val ){
      return val[1].toFixed(2)+'<br>'+val[2];
    }
  }).range2DSlider('value',values);
</script>

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

Показать код

<input id="slider41" />
<style type="text/css">.
xdsoft_custom .xdsoft_range2dslider_runner{
	border-radius:1px;
	margin:0px 0px -4px -8px !important;
	background:rgba(0,0,127,0.5);
	border:1px outset #ddd;
}
.xdsoft_custom .xdsoft_range2dslider_box{
	min-height:8px;
	background:rgba(127,127,127,0.5);
	border-radius:1px;
	border-style:solid;
}
.xdsoft_custom .xdsoft_slider_label{
	background: red;
	color: #fff;
	bottom: 22px !important;
}
.xdsoft_custom .xdsoft_slider_label.xdsoft_slider_label_top:after{
	border-top-color:red;
}
</style>
<script>
$('#slider41').range2DSlider({
	grid:false,
	height:0,
	className:'xdsoft_custom',
     	style:'margin-top:50px;',
	showLegend:[1,0],
	axis:[[0,0.1]],
	tooltip:['top'],
	alwShowTooltip:[true],
	allowAxisMove:['x'],
	printLabel:function( val ){
		return val[0].toFixed(3);
	}
}).range2DSlider('value',[[0.05,0]]);
</script>

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

Настройки

$('.slider1').range2DSlider({
	axis:[
		[-10,-5,0,5,10],
		[-10,10]
	]
});

$('.slider2').range2DSlider({
	value:[
		[0,0],
		[5,5],
		[1,6],
		[9,9],
		[10,10]
	]
});

$('.slider3').range2DSlider({
	projections:true
});

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

$('.slider5').range2DSlider({
	skin:'myskin'
});

$('.slider5').range2DSlider({
	className:'myclass myclass2'
});

$('.slider6').range2DSlider({
	value:[[0,5]],
	showRanges:[[0,1]],
	style:'float:left;margin-left:25px;',
	axis:[[0,1],[0,10]],
	template:'vertical'
});

$('.slider7').range2DSlider({
	height:'10px'
});

$('.slider8').range2DSlider({
	width:'30%'
});

$('.slider9').range2DSlider({
	x:'right',
	y:'top'
});

{
	width:0.5,
	color:'#888',
	dashed:[5,2]
}

$('.slider10').range2DSlider({
	grid:true,
	gridStep:[40,40],
	gridStyle:{
		width:1.5,
		color:'red',
		dashed:[1,2]
	}
});

$('.slider11').range2DSlider({
 round:true,
 roundMethod:function(val){return val>4?5:3;}
});

$('.slider').range2DSlider({
 showLegend:false,
});

$('.slider').range2DSlider({
 	showLegend:[true,false]
});
$('.slider').range2DSlider({
 	showLegend:[false,false],
recalcLegends:true
});

$('.slider').range2DSlider({
 tooltip:['top','right','bottom','left'],
 value:[[2,5],[4,5],[6,5],[8,5]],
 alwShowTooltip:[true,true,true,false]
});

$('.slider').range2DSlider({
 template:'horizontal',
 round:true,
 onlyGridPoint:true
});

$('.slider').range2DSlider({
value:[[1,1],[3,3],[5,5]],
allowAxisMove:['x','y','both']
});

function( value ){
				return value[0].toFixed(2)+'-'+value[1].toFixed(2)
}

$('.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);
}
});

$('.slider').range2DSlider({
printValue:function( val ){
 return val[0].toFixed(5);
}
});

Оставлять комментарии могут только зарегистрированные пользователи

Комментарии  

# Anjutochka 23.07.2014 02:48

Зачем запретил копирование? Фрагменты приходится шлепать, либо с первоисточника копировать и вставлять. А защита такая только от чайника спасет.

# Leroy 23.07.2014 11:39

что запретил?

# Cywiluga 10.08.2014 05:03

дьдььд

# Сергей123321 29.03.2015 17:16

Как в слайдере (ползунок), с поддержкой 2х значений вывести в форме через input две переменные чтобы с ними можно было работать ?

Обновить список комментариев