- Bahagian hadapan
- HTML| CSS| JavaScript| Vue.js
Syor Terkini
-
Php8, saya datang juga
84669 orang belajar
- asas asli
- HTML| CSS| HTML5| CSS3| JavaScript
Syor Terkini
-
Ketahui reka letak tapak web dalam masa 30 minit
152542 orang belajar
- Pengenalan kepada Asas
- MySQL| SQL Server
Syor Terkini
-
Tutorial Video Permulaan Shangguan Oracle kepada Mahir
20005 orang belajar
Syor Terkini
-
Baris pertama kod UNI-APP anda
5487 orang belajar
-
Berkibar dari awal ke pelancaran apl
7821 orang belajar
Syor Terkini
-
-
Tutorial Video PS Kemahiran Asas Sifar
180660 orang belajar
-
Tutorial video UI 16 hari untuk anda bermula
48569 orang belajar
-
Tutorial Video Teknik PS dan Teknik Menghiris
18603 orang belajar
- Klasifikasi Perpustakaan Kelas
- HTTP| TCP/IP| pengaturcaraan asas
Syor Terkini
-
Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek
40936 orang belajar
-
-
Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP
1183 orang belajar
-
Tutorial Video Websocket
32909 orang belajar
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Saya tidak pasti sama ada ini membantu, tetapi inilah pemfaktoran semula yang saya lakukan. Mungkin anda boleh membuat beberapa pengubahsuaian untuk disesuaikan dengan tugas anda.
HTML
<!DOCTYPE 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"> <link rel="stylesheet" href="style.css"> <title>Slider</title> </head> <body> <div> <span id="rangeValue">0</span> <Input type="range" name="" id="range" value="0" min="0" max="100"></Input> </div> </body> <script src=""></script> </html>CSS
body { justify-content: center; align-items: center; min-height: 100vh; background: #151515; } #rangeValue { position: relative; display: block; font-size: 6em; color: #999; font-weight: 400; } /* Input Thumb */ input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; height: 20px; width: 20px; border-radius: 50%; background: #ff4500; cursor: ew-resize; box-shadow: 0 0 2px 0 #555; transition: background .3s ease-in-out; } input[type="range"]::-moz-range-thumb { -webkit-appearance: none; height: 20px; width: 20px; border-radius: 50%; background: #ff4500; cursor: ew-resize; box-shadow: 0 0 2px 0 #555; transition: background .3s ease-in-out; } input[type="range"]::-ms-thumb { -webkit-appearance: none; height: 20px; width: 20px; border-radius: 50%; background: #ff4500; cursor: ew-resize; box-shadow: 0 0 2px 0 #555; transition: background .3s ease-in-out; } /* Input Track */ input[type=range]::-webkit-slider-runnable-track { -webkit-appearance: none; box-shadow: none; border: none; background: transparent; } input[type=range]::-moz-range-track { -webkit-appearance: none; box-shadow: none; border: none; background: transparent; }JS
const rangeInputs = document.querySelectorAll('input[type="range"]') function handleInputChange(e) { let target = e.target if (e.target.type !== 'range') { target = document.getElementById('range') } const min = target.min const max = target.max const val = target.value target.style.backgroundSize = (val - min) * 100 / (max - min) + '% 100%' } rangeInputs.forEach(input => { input.addEventListener('input', handleInputChange) })Anda boleh melaraskannya mengikut pilihan anda. Harap ini membantu.