Range Slider for text values

Question

I need a range slider just like below site has the options cut, Clarity and color has slider

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

how to add range slider for color or text values like good better best If anybody tell me how can i implement same slider in my site than its very helpful to me

Thanks

Answer 1

Try this out:

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>