我想創建一個如下圖所示的范圍：
這是我的代碼：
<div class="form-group">
<label for="distance" class="form-label">Aran?lan lokasyona uzakl?k</label>
<div class="distance">
<output>40 </output>
<span>km uzakl?k</span>
</div>
<input type="range" value="40" min="1" max="50" oninput="this.nextElementSibling.value = this.value" class="form-range" id="distance">
<div class="total-distance">50</div>
</div>所以我想要實作的是，我想用范圍輸入來移動它。
PS：我正在使用引導程式進行范圍。
uj5u.com熱心網友回復：
如果使用下面我開發的解決方案，則需要開發一個變換函式來評估文本的新位置。以下等式margin根據變化量生成新位置的值。例如;
T(x) = x * 4 60;
如果沒有更簡單的方法，則轉換函式也應該將頁面寬度作為輸入：
T(x, width)
let output = document.getElementById('result');
let distance = document.getElementById('distance');
function changeValue(value){
output.innerHTML = `${50 - parseInt(value)}`;
/* If this method is used, it is necessary to develop a transformation method. */
let result = parseInt(value) * 4 60;
distance.style.marginLeft = `${result}px`;
}
changeValue(40);input{
margin-left: 100px;
}
#distance{
width: 200px;
}<div class="form-group">
<label for="distance" class="form-label">Aran?lan lokasyona uzakl?k</label>
<div id="distance">
<output id="result">40</output>
<span> km uzakl?k</span>
</div>
<input onchange="changeValue(this.value)" type="range" value="40" min="0" max="50" oninput="this.nextElementSibling.value = this.value" class="form-range" id="distance">
<div class="total-distance">Total: 50</div>
</div>uj5u.com熱心網友回復：
好老的原生 JS……真是輕而易舉！
首先，查看下面的代碼片段
現在 - 讓我們分解解決方案
CSS - 樣式屬性允許 ,moving 標簽有自己的寬度 能夠移動（根據需要）
JS - 注冊一個事件（我已經使用了該mouse up事件，但您可以使用on change事件或任何其他來滿足您的要求）。然后，做一個簡單的計算——我們做了多少進度，投影到實際input大小。剩下的唯一一件事就是將新位置調整為您的標簽
希望這可以幫助您開始作業
請享用
function x(input) {
const percent = input.value / 50
const position = percent * input.clientWidth
const labelElement = document.querySelector('.distance')
labelElement.style.left = `${position - labelElement.clientWidth / 2}px`
}.distance {
display: inline-block;
position: relative;
}<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<label for="distance" class="form-label">Aran?lan lokasyona uzakl?k</label>
<br/>
<div class="distance">
<output>40 </output>
<span>km uzakl?k</span>
</div>
<input onMouseUp=x(this) type="range" value="40" min="1" max="50" oninput="this.nextElementSibling.value = this.value" class="form-range" id="distance">
<div class="total-distance">50</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/414284.html
標籤：
上一篇：基于3個條件的顏色html表
下一篇：按鈕切換顯示顯示隱藏