时间戳

首页 > 解决方案 > 如何用两边的文字锚定我的滑块？

javascript - 如何用两边的文字锚定我的滑块？

问题描述

如何在滑块的两侧添加“非常同意”和“非常不同意”的文字？

非常感谢 ：）

我的代码是：

<!DOCTYPE html>
<html>
<head>

</head>
<body>


<p><font color="black">Right now I feel: Attentive</p>
<div class="slidecontainer">
<input type="range" min="0" max="100" value="50" step="0.01"         class="slider" id="myRange">
<p><font color="black">Value: <span id="demo"></span></p>
</div>


<script>
var slider1 = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider1.value;

slider1.oninput = function() {
output.innerHTML = this.value;
}
</script>

标签： javascripthtmlslider

解决方案

我为它创建了一个小提琴。

CSS

.slidecontainer {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 20px 0;
}
.slider {
  margin: 0 10px;
}

HTML

Right now I feel: Attentive
<div class="slidecontainer">
<span>Strongly agree</span><input type="range" min="0" max="100" value="50" step="0.01"         class="slider" id="myRange"><span>Strongly Disagre</span>
</div>
<font color="black">Value: <span id="demo"></span>

JS

var slider1 = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider1.value;

slider1.oninput = function() {
output.innerHTML = this.value;
}

https://jsfiddle.net/kawal/4p6fgnLu/2/

推荐阅读