jQuery拖动控制进度条并且获取值

最新推荐文章于 2021-09-29 16:45:20 发布

前端王小婷

最新推荐文章于 2021-09-29 16:45:20 发布

阅读量301

点赞数

本文链接：https://blog.csdn.net/weixin_44763569/article/details/118301123

版权

这篇博客介绍了如何利用jQuery创建一个可拖动的进度条，并详细讲解了实现过程，包括必要的CSS样式和jQuery脚本`jquery.range.js`的使用，最终展示出了交互效果。

摘要由CSDN通过智能技术生成

jQuery实现可拖动控制进度条

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>jQuery可拖动控制进度条</title>
		<style type="text/css">
			.demo {
				width: 350px;
				margin: 100px auto 10px auto
			}
			#g1,
			#g2 {
				margin-top: 50px
			}
		</style>
		<link rel="stylesheet" href="css/jquery.range.css" />
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.range.js"></script>
		<script type="text/javascript">
			$(function() {
				$('.single-slider').jRange({
					from: 0,
					to: 10,
					step: 1,
					width: 200,
					showLabels: true,
					showScale: true
				});

			});
		</script>
	</head>
	<body>
		<div class="demo">
			<input type="hidden" class="single-slider" value="5" />
		</div>
	</body>
</html>

css

.slider-container .back-bar {
	height: 10px;
	position: relative;
}

.slider-container .back-bar .selected-bar {
	position: absolute;
	height: 100%;
}

.slider-container .back-bar .pointer {
	position: absolute;
	width: 10px;
	height: 10px;
	background-color: red;
	cursor: col-resize;
	opacity: 1;
	z-index: 2;
}

.slider-container .back-bar .pointer-label {
	position: absolute;
	top: -17px;
	font-size: 8px;
	background: white;
	white-space: nowrap;
	line-height: 1;
}

.slider-container .back-bar .focused {
	z-index: 10;
}

.slider-container .scale {
	top: 2px;
	position: relative;
}

.slider-container .scale span {
	position: absolute;
	height: 5px;
	border-left: 1px solid #999;
	font-size: 0;
}

.slider-container .scale ins {
	font-size: 9px;
	text-decoration: none;
	position: absolute;
	left: 0;
	top: 5px;
	color: #999;
	line-height: 1;
}

.theme-green .back-bar {
	height: 15px;
	border-radius: 2px;
	background-color: #eeeeee;
	background-color: #e7e7e7;
}

.theme-green .back-bar .selected-bar {
	border-radius: 2px;
	background-color: #a1fad0;
}

.theme-green .back-bar .pointer {
	width: 14px;
	height: 25px;
	top: -5px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background-color: #e7e7e7;
}

jquery.range.js

/*jshint multistr:true, curly: false */
/*global jQuery:false, define: false */
/**
 * jRange - Awesome range control
 *
 * Written by
 * ----------
 * Nitin Hayaran (nitinhayaran@gmail.com)
 *
 * Licensed under the MIT (MIT-LICENSE.txt).
 *
 * @author Nitin Hayaran
 * @version 0.1-RELEASE
 *
 * Dependencies
 * ------------
 * jQuery (http://jquery.com)
 *
 **/
;
(function($, window, document, undefined) {
	'use strict';

	var jRange