一，效果图。

二，代码。

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>Todo</title>
  7.     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  8.     <link href="lib/ionic/css/ionic.css" rel="stylesheet">
  9.     <script src="lib/ionic/js/ionic.bundle.js"></script>
  10.     <!-- 在使用 Cordova/PhoneGap 创建的 APP 中包含的文件，由 Cordova/PhoneGap 提供，(开发过程中显示 404) -->
  11.     <script src="js/app2.js"></script>
  12.     <script src="cordova.js"></script>
  13.     <link href="http://www.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet">
  14.     <script src="http://www.runoob.com/static/ionic/js/ionic.bundle.min.js"></script>
  15. </head>
  16.  
  17. <body>
  18.     <div class="range">
  19.         <i class="icon ion-volume-low"></i>
  20.         <input type="range" name="volume">
  21.         <i class="icon ion-volume-high"></i>
  22.     </div>
  23.     <div class="list" style="margin-top:13px">
  24.         <div class="ltem item-divider">
  25.             Range In A List.
  26.         </div>
  27.         <div class="item range range-positive">
  28.             <i class="icon ion-ios-sunny-outline"></i>
  29.             <input type="range" name="volume" min="0" max="100" value="12">
  30.             <i class="icon ion-ios-sunny"></i>
  31.         </div>
  32.         <div class="item range range-calm">
  33.             <i class="icon ion-ios-lightbulb-outline"></i>
  34.             <input type="range" name="volume" min="0" max="100" value="25">
  35.             <i class="icon ion-ios-lightbulb"></i>
  36.         </div>
  37.         <div class="item range range-balanced">
  38.             <i class="icon ion-ios-bolt-outline"></i>
  39.             <input type="range" name="volume" min="0" max="100" value="38">
  40.             <i class="icon ion-ios-bolt"></i>
  41.         </div>
  42.         <div class="item range range-energized">
  43.             <i class="icon ion-ios-moon-outline"></i>
  44.             <input type="range" name="volume" min="0" max="100" value="50">
  45.             <i class="icon ion-ios-moon"></i>
  46.         </div>
  47.         <div class="item range range-assertive">
  48.             <i class="icon ion-ios-partlysunny-outline"></i>
  49.             <input type="range" name="volume" min="0" max="100" value="63">
  50.             <i class="icon ion-ios-partlysunny"></i>
  51.         </div>
  52.         <div class="item range range-royal">
  53.             <i class="icon ion-ios-rainy-outline"></i>
  54.             <input type="range" name="volume" min="0" max="100" value="75">
  55.             <i class="icon ion-ios-rainy"></i>
  56.         </div>
  57.         <div class="item range range-dark">
  58.             <i class="icon ion-ios-lightbulb-outline"></i>
  59.             <input type="range" name="volume" min="0" max="100" value="88">
  60.             <i class="icon ion-ios-lightbulb"></i>
  61.         </div>
  62.     </div>
  63. </body>
  64.  
  65. </html>

参考资料：《菜鸟教程》

【代码笔记】Web-ionic-Range的更多相关文章

  1. 《编写高质量代码：Web 前端开发修炼之道》 笔记与读后感

    编写高质量代码:Web 前端开发修炼之道/曹刘阳著. —北京:机械工业出版社,2010.5 第一版 涉及到的知识点: 1. CSS Sprites 在国内很多人叫css精灵,是一种网页图片应用处理方式 ...

  2. [学习笔记] SSD代码笔记 + EifficientNet backbone 练习

    SSD代码笔记 + EifficientNet backbone 练习 ssd代码完全ok了,然后用最近性能和速度都非常牛的Eifficient Net做backbone设计了自己的TinySSD网络 ...

  3. 【hadoop代码笔记】Mapreduce shuffle过程之Map输出过程

    一.概要描述 shuffle是MapReduce的一个核心过程,因此没有在前面的MapReduce作业提交的过程中描述,而是单独拿出来比较详细的描述. 根据官方的流程图示如下: 本篇文章中只是想尝试从 ...

  4. 【hadoop代码笔记】hadoop作业提交之汇总

    一.概述 在本篇博文中,试图通过代码了解hadoop job执行的整个流程.即用户提交的mapreduce的jar文件.输入提交到hadoop的集群,并在集群中运行.重点在代码的角度描述整个流程,有些 ...

  5. 【Hadoop代码笔记】目录

    整理09年时候做的Hadoop的代码笔记. 开始. [Hadoop代码笔记]Hadoop作业提交之客户端作业提交 [Hadoop代码笔记]通过JobClient对Jobtracker的调用看详细了解H ...

  6. <Python Text Processing with NLTK 2.0 Cookbook>代码笔记

    如下是<Python Text Processing with NLTK 2.0 Cookbook>一书部分章节的代码笔记. Tokenizing text into sentences ...

  7. DW网页代码笔记

    DW网页代码笔记 1.样式.       class  插入类样式  标签技术(html)解决页面的内容样式技术(css)解决页面的外观脚本技术       解决页面动态交互问题<form> ...

  8. 前端学习:JS(面向对象)代码笔记

    前端学习:JS(面向对象)代码笔记 前端学习:JS面向对象知识学习(图解) 创建类和对象 创建对象方式1调用Object函数 <body> </body> <script ...

  9. ionic-CSS：ionic Range

    ylbtech-ionic-CSS:ionic Range 1.返回顶部 1. ionic Range ionic Range 是一个滑块控件,ionic 为 Range 提供了很多种默认的样式.而且 ...

  10. 【代码笔记】Java Web初入:XML的进一步深入了解

    2015-12-25 文件名    guojia.xml <?xml version="1.0" encoding="GB2312"?> <! ...

随机推荐

  1. 单源最短路径算法——Bellman-ford算法和Dijkstra算法

     BellMan-ford算法描述 1.初始化:将除源点外的所有顶点的最短距离估计值 dist[v] ← +∞, dist[s] ←0; 2.迭代求解:反复对边集E中的每条边进行松弛操作,使得顶点集V ...

  2. Java设计模式----中介者模式

    说到中介大家都不会陌生,买房子租房子有中介,出国留学有中介,买卖二手车还是有中介.那么中介到底是个什么角色呢?实际上,中介就是让买卖双方不必面对面直接交流,由他/她来完成买卖双方的交易,达到解耦买卖人 ...

  3. OpenGL ES: iOS 自定义 UIView 响应屏幕旋转

    iOS下使用OpenGL 如果使用GLKit View 那么不用担心屏幕旋转的问题,说明如下: If you change the size, scale factor, or drawable pr ...

  4. 3-5 Vue中的样式绑定

    Vue中的样式绑定: 本案例,简单设计一个<div>的点击绑定事件来改变div的样式效果 方法一:[class] ①(class和对象的绑定) //如上,运用class和一个对象的形式来解 ...

  5. hdu 6086 -- Rikka with String(AC自动机 + 状压DP)

    题目链接 Problem Description As we know, Rikka is poor at math. Yuta is worrying about this situation, s ...

  6. mysql 开发进阶篇系列 41 mysql日志之慢查询日志

    一.概述 慢查询日志记录了所有的超过sql语句( 超时参数long_query_time单位 秒),获得表锁定的时间不算作执行时间.慢日志默认写入到参数datadir(数据目录)指定的路径下.默认文件 ...

  7. Java NIO中的通道Channel（一）通道基础

    什么是通道Channel 这个说实话挺难定义的,有点抽象,不过我们可以根据它的用途来理解: 通道主要用于传输数据,从缓冲区的一侧传到另一侧的实体(如文件.套接字...),反之亦然: 通道是访问IO服务 ...

  8. bash回收站

    通过替换rm命令使被删除的文件或文件夹被移动到-/.delete/日期文件夹,方便恢复 可以定期手动删除.delete文件夹或通过额外配置定期删除减少空间占用 # for rm {{ del_time ...

  9. java 面试基础总结（二）---多线程

    1.实现多线程的三种方法 1.继成Thread 类,覆盖run()方法即可 2.implements Runnable接口 3.implements Callale接口,执行时通过FutureTask ...

  10. GC频繁抖动的主要原因

    内存抖动 内存抖动是因为大量的对象被创建又在短时间内马上被释放,如循环中分配对象,很容易引起GC,特别是在较大的循环次数或者一个循环中分配较多的临时对象时. 瞬间产生大量的对象 瞬间产生大量的对象,即 ...