Вновь статья в названии содержит громогласное «самый лучший». Время показало, что когда я рассказывал про 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>
Все что вы увидели выше не строго зашито в слайдер, а является сочетанием определенных настроек. Можно создать конфигурации на все случаи жизни. Под катом описание настроек и их конфигураций, а заинтересовавшиеся могут сразу скачать плагин и поковырять его сами
