<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>修改range</title>
    <style>
        .slider-1 {
            width: 600px;
            margin: 200px auto;
        }
        .slider-1 input[type=range] {
            -webkit-appearance: none;
            width: 600px;
            border-radius: 5px;
            background: -webkit-linear-gradient(#F5C057, #F5C057) no-repeat #E6E6E5;
            background-size: 50% 100%;
        }
        .slider-1 input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
        }
        .slider-1 input[type=range]::-webkit-slider-runnable-track {
            height: 10px;
            border-radius: 5px;
        }
        .slider-1 input[type=range]:focus {
            outline: none;
        }
        .slider-1 input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: 20px;
            width: 2px;
            margin-top: 0px;
            background: #F7931E;
            cursor: pointer;
        }
        .slider-1 .s-mark {
            margin-top: 17px;
        }
        .slider-1 .s-mark span {
            font-size: 12px;
            color: #3E3A39;
            display: block;
            text-align: center;
        }
        .slider-1 .s-mark span:first-child {
            float: left;
        }
        .slider-1 .s-mark span:nth-child(2) {
            float: right;
        }
    </style>
</head>
<body>
    <div class="slider-1">
        <input type="range" name="rangeMolecular" id="" max="2000" min="0" step="100%" value="" oninput="mark(event)">
        <div class="s-mark">
            <span>0</span>
            <span>2000</span>
            <span>1000</span>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
    <script>
        function mark() {
            event || (event = window.event);
            $('.slider-1 input[type=range]').val(event.target.value);
            var info = event.target.value / 2000 * 100;
            $('.slider-1 input[type=range]').css('background-size', info + '% 100%');
        }
    </script>
</body>
</html>

改变input[type=range]的样式 动态滑动的更多相关文章

  1. CSS修改input[type=range]滑块样式

    input[type="range"]是html5中的input标签新属性,样子如下: <input type="range" value="4 ...

  2. 美化input type=range标签滑动样式（带渐变效果）

    input原来的样式就不在此赘述了: 下面看一下实际项目中用到的input输入框,同步绑定输入数据,实现输入框双向绑定(实际项目中使用的是vue框架): html部分: <div class=& ...

  3. 【转】自定义(滑动条)input[type="range"]样式

    1.如何使用滑动条? 用法很简单,如下所示: <input type="range" value="0"> 各浏览器原始样式如下: Chrome:  ...

  4. HTML5新特性——自定义滑动条（input[type="range"]）

    HTML 4.01 与 HTML5之间的差异 以下 input 的 type属性值是 HTML5 中新增的: color.date.datetime.datetime-local.month.week ...

  5. 改变input type="file" 文字、样式等

    <div class="tac"> <input type="file" id="browsefile" class=&q ...

  6. input type=range 进度条的自定义样式

    /* 自定义进度条样式 */ .v_my input[type=range] { -webkit-appearance: none;/*清除系统默认样式*/ width: .8rem; backgro ...

  7. 自定义input[type="radio"]的样式

    对于表单,input[type="radio"] 的样式总是不那么友好,在不同的浏览器中表现不一. 为了最大程度的显示出它们的差别,并且为了好看,首先定义了一些样式: <fo ...

  8. 自定义input[type="file"]的样式

    input[type="file"]的样式在各个浏览器中的表现不尽相同: 1. chrome: 2. firefox: 3. opera: 4. ie: 5. edge: 另外,当 ...

  9. HTML5中input[type='date']自定义样式

    HTML5提供了日历控件功能,缩减了开发时间,但有时它的样式确实不如人意,我们可以根据下面的代码自行修改. 建议:复制下面的代码段,单独建立一个css文件,方便我们修改. /* 修改日历控件类型 */ ...

随机推荐

  1. MySQL启动和停止

    MySQL视为大仓库,关闭的时候有权限有身份都无法进入使用的时候要保持启用状态 方式一: 计算机游击找到“管理”打开 左侧栏目中找到“服务和应用程序”打开 打开服务 找到MySQL...,右击.... ...

  2. 使用Echarts实现折线图的一点总结

    使用Echarts的一点总结 1.安装,我使用得vue cnpm install echarts --save 2.在入口文件main.js中注册,并使用 // 引入折线图 echarts impor ...

  3. php设计模式之桥接模式实例代码

    <?php header("Content-type:text/html;charset=utf-8"); abstract class msg{ protected $se ...

  4. Java中new一个子类对象的同时并不会自动创建一个父类对象

    首先重申一个概念:子类会继承父类所有非私有成员变量和方法,包括父类的构造方法 当创建一个子类对象时,首先开辟内存,然后调用类的构造函数,这里的构造函数由两部分组成,一部分是从父类继承而来的父类的构造方 ...

  5. EF CodeFirst简介、默认约定、数据库初始化策略

    CodeFirst 工作流程 创建或修改领域类-->使用数据注解或者Fluent API来配置领域类-->使用自动数据库迁移技术或者基于代码的数据库迁移技术来创建数据库. CodeFirs ...

  6. word文档巧替换（空行替换、空格替换、软回车替换成硬回车）

    一.空行替换 在日常工作中,我们经常从网上下载一些文字材料,往往因空行多使得页数居高不下.一般方法是:在“编辑”菜单中打开“查找和替换”对话框(或按ctrl+H),在“查找内容”中输入“^p^p”“替 ...

  7. 第五十四篇 Linux相关——远程连接SSH

        No.1. SSH(Secure Shell)安全外壳协议 建立在应用层基础上的安全协议 可靠,专为远程登录会话和其他网络服务提供安全性的协议 有效防止远程管理过程中的信息泄漏问题 SSH客户 ...

  8. jvm(3)：JVM调优

    typora-root-url: ./ JVM调优思路 目的:减少full GC次数.减少STW时间(一次GC的时间) 手段: 打印GC日志-XX:+PrintGCDetails -XX:+Print ...

  9. caffe.bin用法

    $ ./build/tools/caffe.bin caffe.bin: command line brew usage: caffe <command><aegs> comm ...

  10. java_爬虫_获取经过js渲染后的网页源码

    md 弄了一天了……(这个月不会在摸爬虫了,浪费生命) 进入正题: 起初是想写一个爬虫来爬一个网站的视频,但是怎么爬取都爬取不到,分析了下源代码之后,发现源代码中并没有视频的dom 但是在浏览器检查元 ...