範圍欄的文本值

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>