一，效果图。

二，代码。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Todo</title>

    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">

    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- 在使用 Cordova/PhoneGap 创建的 APP 中包含的文件，由 Cordova/PhoneGap 提供，(开发过程中显示 404) -->

    <script src="js/app2.js"></script>

    <script src="cordova.js"></script>

    <link href="http://www.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet">

    <script src="http://www.runoob.com/static/ionic/js/ionic.bundle.min.js"></script>

</head>

<body>

    <div class="range">

        <i class="icon ion-volume-low"></i>

        <input type="range" name="volume">

        <i class="icon ion-volume-high"></i>

    </div>

    <div class="list" style="margin-top:13px">

        <div class="ltem item-divider">

            Range In A List.

        </div>

        <div class="item range range-positive">

            <i class="icon ion-ios-sunny-outline"></i>

            <input type="range" name="volume" min="0" max="100" value="12">

            <i class="icon ion-ios-sunny"></i>

        </div>

        <div class="item range range-calm">

            <i class="icon ion-ios-lightbulb-outline"></i>

            <input type="range" name="volume" min="0" max="100" value="25">

            <i class="icon ion-ios-lightbulb"></i>

        </div>

        <div class="item range range-balanced">

            <i class="icon ion-ios-bolt-outline"></i>

            <input type="range" name="volume" min="0" max="100" value="38">

            <i class="icon ion-ios-bolt"></i>

        </div>

        <div class="item range range-energized">

            <i class="icon ion-ios-moon-outline"></i>

            <input type="range" name="volume" min="0" max="100" value="50">

            <i class="icon ion-ios-moon"></i>

        </div>

        <div class="item range range-assertive">

            <i class="icon ion-ios-partlysunny-outline"></i>

            <input type="range" name="volume" min="0" max="100" value="63">

            <i class="icon ion-ios-partlysunny"></i>

        </div>

        <div class="item range range-royal">

            <i class="icon ion-ios-rainy-outline"></i>

            <input type="range" name="volume" min="0" max="100" value="75">

            <i class="icon ion-ios-rainy"></i>

        </div>

        <div class="item range range-dark">

            <i class="icon ion-ios-lightbulb-outline"></i>

            <input type="range" name="volume" min="0" max="100" value="88">

            <i class="icon ion-ios-lightbulb"></i>

        </div>

    </div>

</body>

</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. [转]kaldi特征和模型空间转换

    转:http://blog.csdn.net/shmilyforyq/article/details/76807431 博主话:这篇博客是对kaldi官网中Feature and model-spac ...

  2. POJ 1177Picture 扫描线(若干矩形叠加后周长)

    Picture   Description A number of rectangular posters, photographs and other pictures of the same sh ...

  3. 14：IO之字符字节流

    字节流: InputStream     OutputStream  字节流:  FileInputStream FileOutputStream BufferedInputStream Buffer ...

  4. [Mac]macOS Mojave ：发现 Mac 的新功能。

    1.深色模式 换种颜色看 Mac “深色模式”为桌面和内建应用带来更生动的外观,可让您轻松专注于最重要的内容. 若要在浅色和深色外观之间切换,请打开“系统偏好设置”并点按“通用”. 2.叠放 整理桌面 ...

  5. 简单登录注册实现（Java面向对象复习）

    简单登录注册的实现(面向对象的复习) 需求: 设计用户类,包含用户名和密码两个属性 设计LoginDemo类设计用户登录方法 用户有三次登录机会,如果连续三次登录失败则退出程序 功能实现页面:     ...

  6. 算法手记（2）Dijkstra双栈算术表达式求值算法

    这两天看到的内容是关于栈和队列,在栈的模块发现了Dijkstra双栈算术表达式求值算法,可以用来实现计算器类型的app. 编程语言系统一般都内置了对算术表达式的处理,但是他们是如何在内部实现的呢?为了 ...

  7. JavaScript中的 this全面解析

    上一章我们排除了一些对this的错误认识和知道了this是在调用函数时被绑定的,完全取决于函数的调用位置.先介绍两个概念:调用位置和调用栈. 调用栈:就是为了到达当前执行位置所调用的所有函数. 调用位 ...

  8. 2019年2月编程语言最新排行：java稳居第一（java优势在哪里）

      近日TIOBE公布了2月编程语言排名,在意料之中java稳居第一,C和C++分别位居第二第三名. 下图是2 月编程语言排行榜 TOP20 榜单以及前 10 名编程语言长期走势图:         ...

  9. python之函数参数问题（参数为可变对象）

    今天看到一段代码,其中函数入参有一个参数为list,类似如下: def linux_monitor(pid=0,pidlist = []): pidlist.append(pid) 通过测试发现是有问 ...

  10. JAVA发送http get/post请求，调用http接口、方法

    import java.io.BufferedReader; import java.io.IOException;import java.io.InputStream; import java.io ...