animation可拖动滑块选择区间代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 animation可拖动滑块选择区间代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<title>animation可拖动滑块选择区间代码</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="css/jquery-ui-slider-pips.min.css">
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-slider-pips.js"></script>
<style type="text/css">

	#slider{
		height: 300px;
		width: 60px;
		position: relative;
		margin: 200px auto;

	}

	#slider .slider-screen{
		width: 3px;
		height: 80%;
		border: none;
		position: absolute;
		margin: 0px;
		top: 10%;
		left: 0%;
		z-index: 2;
		background: #D0D0D0;
	}

	#slider .slider-screen .ui-slider-handle{
		width:9px;
		height: 15px;
		left: -4px;
		margin-bottom: -8px;
	}
	#slider .slider-screen .ui-slider-pip{
		width: 30px;
		left: 26px;
	}
	#slider .slider-screen .ui-slider-pip .ui-slider-label{
		left: 0px;
		width: 30px;
		text-align: center;
	}
	#slider .slider-screen .ui-slider-line{
		background: none;
	}

	#slider .slider-self-border{
		width: 30px;
		height: 298px;
		border: 1px solid green;
		position: absolute;
		left: 25px;
		z-index: 1;
	}
	#slider .slider-self-line{
		width: 3px;
		height: 100%;
		background: #D0D0D0;
	}
	.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
		border: 1px solid #ddd;
		font-weight: bold;
		color: #0073ea;
	}
</style>
</head>
<body>

<div id="slider">
	<div class="slider-screen"></div>
	<div class="slider-self-border"></div>
	<div class="slider-self-line"></div> 
</div>

<script type="text/javascript">
	
	var numbers = ["9", "8", "7", "6", "5", "4", "3", "2", "1"]; 

	$("#slider").find('.slider-screen').slider({

		min: 0, 
		max: numbers.length-1, 
		orientation: "vertical"

	}).slider("pips", {

		rest: "label",
		labels : numbers

	});
</script>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)