Range Slider for text values - rangeslider

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>