范围栏的文本值

Question

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

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

如何添加范围滑块的颜色或文本像值良好更好最佳 如果有人告诉我，我怎么能在我的网站比它非常有帮助实现同一拉我

感谢

Answer 1

尝试了这一点：

function updateTextInput() { 
 
    
 
    
 
    
 
\t 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 
 
    } 
 

 
\t 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>