我在編碼或 Web 開發方面沒有任何專業知識。在 Google 進行了數小時的研究后，我最終撰寫了一組（完美運行的）代碼來構建一個包含 HTML、CSS 和 JS 的范圍滑塊。
我正在使用這個滑塊來改變我智能手機中的媒體音量，在這個媒體控制面板中，這個媒體控制面板是使用一個名為 Tasker 的 Android 應用程式創建的。我的滑塊功能正常，但我想對我的滑塊進行一些外觀更改。
有人可以幫我在我的代碼中實作以下功能嗎？
- 拇指前滑塊部分的顏色/漸變。
- 拇指后滑塊部分的顏色/漸變。
- 拇指的大小、形狀、顏色和不透明度。
這是當前的代碼。隨意編輯這個。
<div class = "container">
<input type="range"
min="0"
max="25"
step="any"
value="%VOLM"
id="volm">
</div>
<style>
.container{
display:flex;
width:100%;
padding-top:5
}
#volm{
-webkit-appearance: none;
background-color: magenta;
border-radius: 2px;
width:153px;
height:5px;
</style>
<script>
var slider = document.getElementById("volm");
slider.addEventListener("input",function()
{
performTask("WebView Slider - Media Volume",1,slider.value,)}, false);
</script>uj5u.com熱心網友回復：
HTML Range Input 有以下兩個偽元素：
- -webkit-slider-runnable-track
- -webkit-滑塊-拇指
您可以使用偽選擇器設定它們的樣式。這個CodePen有一個聰明的解決方案來實作你想要的。通過在拇指上使用框陰影，您可以設定拇指前后區域的樣式。使用多個 box-shadows blurring 來實作類似漸變的效果。
我稍微編輯了您的代碼以顯示如何實作上述目標。休息只是關于您希望滑塊看起來如何的偏好。您還可以使用 JavaScript 根據輸入動態更改屬性值。
.container{
display:flex;
width:100%;
padding-top:5;
height: fit-content;
}
#volm{
position: relative;
margin-top: 5px;
border-radius: 2px;
width:153px;
height: 5px;
-webkit-appearance: none;
}
input::-webkit-slider-runnable-track {
-webkit-appearance: none;
position: relative;
box-sizing: border-box;
background-color: hsl(0deg, 0%, 90%);
width: 100%;
height: 20px;
border-radius: 5px;
overflow: hidden;
}
input::-webkit-slider-thumb {
position: relative;
left: initial;
bottom: 5px;
-webkit-appearance: none;
background-color: blue;
width: 20px;
height: 20px;
border-radius: 20px;
box-shadow: -340px 0 0 320px #1597ff, inset 0 0 0 40px #1597ff, 340px 0 0 320px #00f18f, inset 0 0 0 40px #1597ff;
margin-top: 5px;
}<div class = "container">
<input type="range"
min="0"
max="25"
step="any"
value="%VOLM"
id="volm">
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/428758.html
標籤：javascript html css 网络 滑块