一，效果图。

二，代码。

<!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. poj3281构图题

    题目大意:有F种食物,D种饮料N头奶牛,只能吃某种食物和饮料(而且只能吃特定的一份)一种食物被一头牛吃了之后,其余牛就不能吃了第一行有N,F,D三个整数接着2-N+1行代表第i头牛,前面两个整数是Fi ...

  2. Jmeter 结构、原理介绍 Jmeter结构、原理介绍(1)

    一.Jmeter 简介 1.是基于java语言的开源的应用软件. 2.可以进行接口测试.性能测试.接口及性能的自动化测试. 二.Jmeter体系结构 元件:可以理解为每一个菜单.如THHP请求.响应断 ...

  3. Android 使用View绘制文字(DrawText)技术总结

    转载请注明出处: http://www.cnblogs.com/renhui/p/7453534.html 这里的绘制文字不是直接调用TextView.setText(String content)去 ...

  4. preg_match(): Compilation failed: character value in \x{} or \o{} is too large at offset 8

    如果用正则筛选中文的时候,需要在规则后面添加字符u,表示使用utf8编码去解析 $reg = '/[\x{4e00}-\x{9fa5}]/u'; 例如: $reg = '/[\x{4e00}-\x{9 ...

  5. 第十九节：Java基本数据类型，循环结构与分支循环

    基本数据类型 Java中的基本数据类型,有8种,在Java中有四种类型,8种基本数据类型. 字节 boolean 布尔型为1/8 byte 字节类型为1 short 短整型为2 char 字符型为2 ...

  6. 自动化测试之数据库操作pymysql

    1.下载并导入pymysql 2.配置参数连接mysql db = pymysql.connect(**config) config = { 'host': str(host), 主机地址 'user ...

  7. 国外青少年最喜爱的聊天 app，竟然是 Google Docs

    简评: 这还真不是标题党,Google Docs 的协作中内置了实时聊天的功能,也可以进行 comments,颇有种现代「传纸条」的既视感.其实国内的石墨文档.腾讯文档等协作工具也有类似的效果,本文很 ...

  8. Alienware 15 R3 装Ubuntu 和 win10 双系统

    一.安装环境 Alienware 15 R3 win10 专业版64位 ubuntu16.04 二.软件下载 1.Ubuntu16.04 下载地址:https://www.ubuntu.com/dow ...

  9. Consul内部分享ppt

    Consul 是一个支持多数据中心,分布式,高可用的服务发现和配置共享系统.由 HashiCorp 公司使用 Go 语言开发,基于Raft协议.部署起来非常容易,只需要极少的可执行程序和配置文件,具有 ...

  10. docker 日志方案

    docker logs默认会显示命令的标准输出(STDOUT)和标准错误(STDERR).下面使用echo.sh和Dockerfile创建一个名为echo.v1的镜像,echo.sh会一直输出”hel ...