如何在两边的文字上固定我的滑块？

Question

如何在滑块的两边添加一个文本，表示“完全同意”和“完全不同意”？

非常感谢：）

我的代码是：

<!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>

Answer 1

我为此制造了一个小提琴。

的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/

如何在两边的文字上固定我的滑块？

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-09-12 23:28:28

如何在两边的文字上固定我的滑块？

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-09-12 23:28:28

解决方案1
0 已采纳 2019-09-12 23:28:28