用html+css+js实现值为左右的滑块按钮
时间: 2024-04-15 21:24:21 浏览: 26
下面是一个使用 HTML、CSS 和 JavaScript 实现值为左右的滑块按钮的示例代码:
HTML:
```html
<div class="slider-container">
<span class="slider-value">左</span>
<input type="range" id="slider" min="0" max="1" value="0">
<span class="slider-value">右</span>
</div>
```
CSS:
```css
.slider-container {
display: flex;
align-items: center;
}
.slider-value {
flex: 1;
text-align: center;
}
#slider {
flex: 5;
}
```
JavaScript:
```javascript
var slider = document.getElementById("slider");
var leftValue = document.getElementsByClassName("slider-value")[0];
var rightValue = document.getElementsByClassName("slider-value")[1];
slider.oninput = function() {
if (this.value == 0) {
leftValue.style.fontWeight = "bold";
rightValue.style.fontWeight = "normal";
} else {
leftValue.style.fontWeight = "normal";
rightValue.style.fontWeight = "bold";
}
};
```
这段代码将创建一个包含左右值的滑块按钮。使用 CSS 的 flex 布局来将左右值与滑块按钮水平排列。JavaScript 监听滑块值的变化,并根据值的不同设置左右值的样式(例如加粗)。
你可以根据需要进行进一步的样式和功能调整。希望对你有帮助!
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)