jqueryui slider
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 滑块（Slider） - 范围滑块</title>
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jqueryui/style.css">
<script>
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
});
</script>
</head>
<body>
<p>
<label for="amount">价格范围：</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range"></div>
</body>
</html>
最新文章
- ASP.NET MVC5 网站开发实践(一) - 框架（续） 模型、数据存储、业务逻辑
- ES5——函数，对象，方法，this
- loadrunner录制webservice接口需要用户名密码时的解决方法
- Colorable Fantasy UI
- 条款20：以const-reference传递替换by-value传递
- SVN查看提交日志的命令
- 解读分库分表中间件Sharding-JDBC
- 1 weekend110的hdfs源码跟踪之打开输入流 + hdfs源码跟踪之打开输入流总结
- 使用java实现发送邮件的功能
- 15.MySQL(三)
- windows 安装docker报错：Error checking TLS connection: ssh command error: command : ip addr show
- navigator的一些冷知识
- Java开发之@PostConstruct执行顺序
- Vue + Bootstrap 制作炫酷个人简历（一）
- js当中null和{}区别
- 网络流--最大流ek模板
- [c# 20问] 4.Console应用获取执行路径
- fackbook flow 简单使用
- cogs [HZOI 2015]有标号的二分图计数
- node.js 连接 mysql