范围滑块用于文本值

Question

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

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>