• 用原生input type=range 写一个滑块，兼容各大浏览器

    属性描述
    max设置或返回滑块控件最大值
    min设置或返回滑块控件最小值
    step设置或返回每次拖动滑块控件时的递增量
    value设置或返回滑块控件的value值
    defaultValue设置或返回滑块控件的默认值
    autofocus设置或返回滑块控件在页面加载后是否应自动获取焦点

    先看谷歌浏览器:

    览器

    用法很简单，如下所示：

    <input type="range" value="0">

    火狐浏览器：

    除了火狐的样式需要另外重写一套css，其他的基本不用。

    1. 		/* 火狐 内背景色 */
    2. 		input[type=range]::-moz-range-track {
    3. 			height: 4px;
    4.       background: rgb(229, 229, 229);
    5. 		}
    6. 		/* 火狐 外背景色 */
    7. 		input[type=range]::-moz-range-progress {
    8. 			background: #767676;
    9. 			height: 4px;    
    10. 			border-radius: 10px;
    11. 		}

     全部代码如下:

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9.   
    10.   
    11.   <style>
    12.     /* 隐藏range控件默认样式 */
    13.     [type="range"] {
    14.       -webkit-appearance: none;
    15.       appearance: none;
    16.       margin: 0;
    17.       outline: 0;
    18.       background-color: transparent;
    19.       width: 500px;
    20. 			border-radius: 10px;
    21.     }
    22. 		/* 火狐 内背景色 */
    23. 		input[type=range]::-moz-range-track {
    24. 			height: 4px;
    25.       background: rgb(229, 229, 229);
    26. 		}
    27. 		/* 火狐 外背景色 */
    28. 		input[type=range]::-moz-range-progress {
    29. 			background: #767676;
    30. 			height: 4px;    
    31. 			border-radius: 10px;
    32. 		}
    33.  
    34.     /* 定义range控件轨道的样式 */
    35.     [type="range"]::-webkit-slider-runnable-track {
    36.       height: 4px;
    37.       background: rgb(229, 229, 229);
    38.     }
    39.  
    40.     /* 定义range控件容器的样式 */
    41.     [type="range" i]::-webkit-slider-container {
    42.       height: 20px;
    43.       overflow: hidden;
    44.     }
    45.  
    46.     /* 定义range控件拇指的样式 */
    47.     [type="range"]::-webkit-slider-thumb {
    48.       -webkit-appearance: none;
    49.       appearance: none;
    50.       width: 20px;
    51.       height: 20px;
    52.       border-radius: 50%;
    53.       background-color: #767676 !important;
    54.       border: 1px solid transparent;
    55.       margin-top: -8px;
    56.       /* 使用border-image属性给拇指添加渐变边框 */
    57.       border-image: linear-gradient(#767676, #767676) 0 fill / 8 20 8 0 / 0px 0px 0 2000px;
    58.     }
    59.   style>
    60. head>
    61.  
    62. <body>
    63.   
    64.   <input type="range" min="0" max="100" value="50">
    65.  
    66. body>
    67.  
    68. html>

  • 相关阅读:
    Django + Taro 前后端分离项目实现企业微信登录
    分布式事务
    Grafana,Loki,Tempo,Prometheus,Agent搭建日志链路监控平台
    如何下载国外硕博论文？
    Java对象的相等判定问题与equals方法解析
    vmware中的linux虚拟机如何增加磁盘容量
    项目时间管理-架构真题（二十四）
    Edge官方鼠标手势
    模板方法模式
    在linux上登录oracle服务器,将库中表导出为dump文件
  • 原文地址：https://blog.csdn.net/qq_41646249/article/details/132887500