rangeslider - 文本值的范围滑块

Question

我需要一个范围滑块，就像下面的网站有选项剪切，清晰度和颜色有滑块

http://www.lumeradiamonds.com/diamonds/search?shapes=B,PR,O,M,P,C,E,AS,R,H&

如何为颜色或文本值添加范围滑块，比如最好的更好如果有人告诉我如何在我的网站中实现相同的滑块，这对我很有帮助

谢谢

Answer 1

试试这个：

function updateTextInput() {
    
    
    
	var value1 = Number(document.getElementById("range").value);
    var value2 = "";

    if ( value1 === 0 ) {
        value2 = "Blue Diamonds";
        // Insert more code here for what you intend to do
    }
    else if ( value1 === 1 ) {
        value2 = "Blue Diamonds";
        // Insert more code here for what you intend to do
    }
    else if ( value1 === 2 ) {
        value2 = "Red Diamonds";
        // Insert more code here for what you intend to do
    }
    else if ( value1 === 3 ) {
        value2 = "Black Diamonds";
        // Insert more code here for what you intend to do
    }
    else if ( value1 === 4 ) {
        value2 = "Green Diamonds";
        // Insert more code here for what you intend to do
    }

	document.getElementById('value2').innerHTML = value2;
    
   
    
}

<form>
<input id="range" type="range" name="rangeInput" min="0" step="1" max="4" value="2" class="white" onchange="updateTextInput(this.value);" onchange="updateTextInput(this.value);" oninput="amount.value=rangeInput.value">
  <input oninput="rangeInput.value=amount.value" id="box" type="text" value="0" name="amount" for="rangeInput" onkeyup="updateTextInput(this.value);" oninput="amount.value=rangeInput.value" />
</form>

    <p id="value2">Red Diamonds</p>