<!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>

jqueryui slider的更多相关文章

  1. 基于jQuery-ui实现多滑块slider

    效果图: 代码: <!doctype html> <html lang="en"> <head> <meta charset=" ...

  2. jqueryui插件slider的简单使用

    <!DOCTYPE html> <html> <head> <title>slider</title> <meta charset=& ...

  3. jQueryUI 之控件们

    总结:总的来说,这些控件可以在官网找到列子, 部分ui效果不如意的,可根据jQueryUI上添加的类选择器等,进行再加工 <!DOCTYPE html> <html> < ...

  4. jQueryUI使用指南

    jQuery UI包含了许多维持状态的小部件(Widget),因此,它与典型的 jQuery 插件使用模式略有不同.所有的 jQuery UI 小部件(Widget)使用相同的模式,所以,只要您学会使 ...

  5. JQueryUI之Autocomplete

    JQueryUI之Autocomplete JQuery UI 是以 JQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互.动画.特效和可更换主题的可视控件,这些控件 ...

  6. [Web UI]对比Angular/jQueryUI/Extjs：没有一个框架是万能的

    Angular不能做什么?对比Angular/jQueryUI/Extjs 框架就好比兵器,你得明白你手里拿的是屠龙刀还是倚天剑,刀法主要是砍,剑法主要是刺.对于那些职业喷子和脑残粉,小僧送你们两个字 ...

  7. jquery.slider jquery滑块插件

    原文发布时间为:2011-03-08 -- 来源于本人的百度文章 [由搬家工具导入] http://jqueryui.com/demos/slider jquery滑块插件

  8. HTML 学习笔记 JQueryUI（Interactions,Widgets）

    Draggable 允许使用鼠标移动元素(拖动) demo <html>    <head>        <meta charset="UTF-8" ...

  9. 对比AngularJS/jQueryUI/Extjs：没有一个框架是万能的

    AngularJS不能做什么?对比Angular/JSjQueryUI/Extjs 框架就好比兵器,你得明白你手里拿的是屠龙刀还是倚天剑,刀法主要是砍,剑法主要是刺.对于那些职业喷子和脑残粉,小僧送你 ...

随机推荐

  1. Kettle 版本及使用问题

    kettle 简介 Kettle也叫PDI (Pentaho Data Intergration) Kettle 版本及下载 7.1及更早版本: https://sourceforge.net/pro ...

  2. 使用WebGL + Three.js制作动画场景

    使用WebGL + Three.js制作动画场景 3D图像,技术,打造产品,还有互联网:这些只是我爱好的一小部分. 现在,感谢WebGL的出现-一个新的JavaScriptAPI,它可以在不依赖任何插 ...

  3. 企业级时间轴插件Vue-timelinepick

    简介 时间范围选择插件 取当前时间之前一段时间范围 按刻,小时,天分类 在线演示及下载 在线演示:https://yelingfeng.github.io/vue-timelinepick/ 本地下载 ...

  4. Junit使用第二弹

    实例总结 1. 参数化测试 有时一个测试方法,不同的参数值会产生不同的结果,那么我们为了测试全面,会把多个参数值都写出来并一一断言测试,这样有时难免费时费力,这是我们便可以采用参数化测试来解决这个问题 ...

  5. UVa 1585 待解决

    是在遇到第一个ooxx的时候会出错,会少算一个1 #include<stdio.h> int main() { int i,k=0,sum=0; char a[100]={"oo ...

  6. 如何选择优动漫PAINT版本？是个人版还是EX版

    优动漫PAINT也就是我们常说的clip studio paint(CSP)的中文版本,它是一款功能强大的动漫绘图软件,适用于个人和专业团队创作,分为个人版和EX版.搭载了绘制漫画和插画所需的所有功能 ...

  7. spring cloud(四) feign

    spring cloud 使用feign进行服务间调用 1. 新建boot工程 pom引入依赖 <dependency> <groupId>org.springframewor ...

  8. JS 蓝球弹起的高度 100 米 第几次高度小于1米

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. PHP迭代器的内部执行过程

    下面我们来了解如何实现一个自定义的迭代器,然后再开始慢慢理解迭代器的内部工作原理.先来看一个官方的例子: class myIterator implements Iterator { private ...

  10. python之组合与继承的使用场景

    1.什么时候使用类的组合?当类之间有显著的不同,并且较小的类是组成较大类所需要的组件,此时用类的组合较合理:场景:医院是由多个科室组成的,此时我们可以定义不同科室的类,这样医院的类我们可以直接使用各个 ...