Home > Article > Web Front-end > Numerical range implemented by jQuery range2dslider select plug-in special effects multiple code sharing_jquery

Numerical range implemented by jQuery range2dslider select plug-in special effects multiple code sharing_jquery

WBOYOriginal: 2016-05-16 15:42:251396browse

The example in this article describes the numerical range range2dslider selection plug-in effect implemented by jQuery. Share it with everyone for your reference. The details are as follows:
This is a simple jquery plug-in. After using this plug-in, the mouse can slide (drag) to control the special effect code of numerical range selection.
运行效果图： -------------------查看效果下载源码----------- --------

Tips: If the browser does not work properly, you can try switching the browsing mode.
The special effect code for selecting the numerical range implemented by jQuery is as follows

<!doctype html>
<html lang="en">
<head>
<meta charset="gb2312">
<title>jQuery数值范围选取插件range2dslider </title>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" href="jquery.range2dslider.css">
<script type="text/javascript" src="jquery.range2dslider.js"></script>
<style>
 body,html{
 margin:0px;
 padding:0px;
 }
 ul{
 margin:0px 0px;
 padding:10px 25px;
 }
 body>div{
 margin:0px 20px;
 padding:20px;
 background:rgba(184, 184, 184, 0.1);
 }
</style>
</head>
<body>
<div>
<h2>简单的二维滑块</h2>
<input id="slider">
<script>
window.onerror = function(msg, url, linenumber) {
 alert('Error message: '+msg+'\nURL: '+url+'\nLine Number: '+linenumber);
 return true;
}
$('#slider').range2DSlider({
 grid:true,
 axis:[[1,2,5,7,10],[2,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',[[0,1],[3,0],[6,6]]);

$('#slider')
 .range2DSlider();
</script>
<h2>水平滑块</h2>
<input id="slider1">
<script>
$('#slider1').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]]
});
</script>
<h2>垂直滑块</h2>
<input class="slider2">
<input class="slider2">
<input class="slider2">
<input class="slider2">
<input class="slider2">
<input class="slider2">
<div style="clear:both;float:none;"></div>
<script>
$('.slider2').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';
 }
});
</script>
<h2>平滑滑块(x)</h2>
<input class="slider3">
<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]);
 } 
 $('.slider3').range2DSlider({
 x:'right',
 y:'top',
 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>
<h2>自定义风格滑块</h2>
<input id="slider4">
<style>
 .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>
$('#slider4').range2DSlider({
 grid:false,
 height:0,
 className:'xdsoft_custom',
 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>
</div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
</div>
</body>
</html>

The above is the special effect code for selecting the numerical range implemented by jQuery. I hope you like it.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jQuery web tab plug-in rTabs usage example analysis_jqueryNext article：jQuery web tab plug-in rTabs usage example analysis_jquery

See more

Numerical range implemented by jQuery range2dslider select plug-in special effects multiple code sharing_jquery

Related articles