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

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

先看谷歌浏览器:

览器

用法很简单，如下所示：

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

火狐浏览器：

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


		/* 火狐 内背景色 */
		input[type=range]::-moz-range-track {
			height: 4px;
      background: rgb(229, 229, 229);
		}
		/* 火狐 外背景色 */
		input[type=range]::-moz-range-progress {
			background: #767676;
			height: 4px;    
			border-radius: 10px;
		}

全部代码如下:


html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  
  
  <style>
    /* 隐藏range控件默认样式 */
    [type="range"] {
      -webkit-appearance: none;
      appearance: none;
      margin: 0;
      outline: 0;
      background-color: transparent;
      width: 500px;
			border-radius: 10px;
    }
		/* 火狐 内背景色 */
		input[type=range]::-moz-range-track {
			height: 4px;
      background: rgb(229, 229, 229);
		}
		/* 火狐 外背景色 */
		input[type=range]::-moz-range-progress {
			background: #767676;
			height: 4px;    
			border-radius: 10px;
		}
 
    /* 定义range控件轨道的样式 */
    [type="range"]::-webkit-slider-runnable-track {
      height: 4px;
      background: rgb(229, 229, 229);
    }
 
    /* 定义range控件容器的样式 */
    [type="range" i]::-webkit-slider-container {
      height: 20px;
      overflow: hidden;
    }
 
    /* 定义range控件拇指的样式 */
    [type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #767676 !important;
      border: 1px solid transparent;
      margin-top: -8px;
      /* 使用border-image属性给拇指添加渐变边框 */
      border-image: linear-gradient(#767676, #767676) 0 fill / 8 20 8 0 / 0px 0px 0 2000px;
    }
  style>
head>
 
<body>
  
  <input type="range" min="0" max="100" value="50">
 
body>
 
html>

相关阅读:
昇思25天学习打卡营第21天|RNN实现情感分类
【附gpt4.0升级秘笈】百度智能云万源全新一代智能计算操作系统发布：引领AI新纪元
Android Camera性能分析第23讲录像Buffer Path实战和Trace分析
质疑标普，理解标普，加入标普
TCP 通信流程详解（附有案例代码）
羧甲基-β-环糊精/Fe3O4纳米复合物|聚苯胺/TiO2-Fe3O4二元纳米复合物|PAn/TiO2/Fe3O4聚苯胺(PAn)微米纤维材料
CSS 简介
WebDAV之葫芦儿·派盘+简悦
17.12 windows临界区、其他各种mutex互斥量
力扣每日一题52：N皇后问题||

原文地址：https://blog.csdn.net/qq_41646249/article/details/132887500