Range Slider W/ Image - Final Version

In this example below you will see how to do a Range Slider W/ Image - Final Version with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by stinkytofu3311, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright stinkytofu3311 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Range Slider W/ Image - Final Version</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

<div class="product-range-wrapper">
  
  <div class="product-range-block">
    <div class="ref-height-block">
      <img src="http://svgshare.com/i/1Ba.svg" alt="Product Height Refrence" height="" width="">
    </div>
    <div class="size-chart-block">
      <img src="http://svgshare.com/i/1Ak.svg" style='' id='img'/>
    </div>
  </div>
  
  <div id="slider_count"><span id="sliderPrice">0</span></div>
  <div class="range-slider-block">
    <input type="range" id="range-slider" value="0.0" min="0" max="5" step="1" />
  </div>
  
  
</div>

<div id="slider_count">Slider Value = <span id="sliderStatus">0</span></div>
<br/>
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/stinkytofu3311/range-slider-with-image-final-version-GmKxoW */
@import url('https://fonts.googleapis.com/css?family=Roboto');

.product-range-wrapper {
  displat: -webkit-flex;
  displat:flex;
  -webkit-flex-direction: column;
  flex-direction:column;
  max-width:600px;
  margin:0px auto;
  /*outline: 1px solid purple;*/
 }
.product-range-block {
  display: -webkit-flex;
  display:flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  width:100%;
  height:100%;
  /*outline: 1px solid red;*/
}
.ref-height-block {
  flex-grow:3;
  /*background-color:red;*/
}
.size-chart-block {
  flex-grow:9;
  /*background-color:green;*/
}
.product-range-block img {
  width:90%;
  /*outline: 1px solid blue;*/
}
#img {
  width: 100% !important;
}


/* ::::::::::::::::::::Range Slider Styles::::::::::::::::::::::::: */
.range-slider-block {
  margin:0px auto;
  width:90%;
  }
#range-slider {
  padding:40px 0px;
  width:100%;
  /*outline: 1px solid green;*/
}
/* Remove Range Sliders Default Styles*/
input[type=range]{
    -webkit-appearance: none;
}
/* Track */
input[type=range]::-webkit-slider-runnable-track {
    height: 10px;
    background: #d7d7d7;
    border: none;
    border-radius: 6px;
}
input[type=range]:focus {
    outline: none;
}
/* Thumb */
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background: #46947F;
    margin-top: -9px;
    transition: box-shadow 0.5s;
}
input[type=range]:hover::-webkit-slider-thumb {
    box-shadow: 0 0 0 10pt rgba(190,190,190,0.4);
    cursor:pointer;
}

/* JS Styles */
/* Changes Thumb color to darker green when mousedownn */
input[type=range].thumb-down::-webkit-slider-thumb {
  background:#316557;
}
/* Changes Thumb color back to light green when mouseup */
input[type=range].thumb-up::-webkit-slider-thumb {
  background:#46947F;  
}
/* Changes Ring color Green */
input[type=range].hover-ring::-webkit-slider-thumb {
    box-shadow: 0 0 0 6pt rgba(70,148,127,0.46);
    cursor:pointer;
}
input[type=range].hover-ring-out::-webkit-slider-thumb {
    box-shadow: 0 0 0 0pt rgba(0,0,0,0);
    cursor:pointer;
}

/* Input Value Styles */
#slider_count {
  margin:0px auto;
  width:100%;
  padding:0px 20px;
  text-align:center;
}
#sliderPrice {
  font-family: 'Roboto', sans-serif;
  font-size:22px;
  font-weight:600;
}
#sliderPrice span {
  font-weight:600;
  color:red;
}






/*Downloaded from https://www.codeseek.co/stinkytofu3311/range-slider-with-image-final-version-GmKxoW */
 var sizeRange = ["11x17 - Starting Price <span>- $19.99</span>", // Store string inside of an Array

        "24x36 - Starting Price <span>- $29.99</span>",

        "70x90 - Starting Price <span>- $39.99</span>",

        "120x50 - Starting Price <span>- $49.99</span>",

        "67x18 - Starting Price <span>- $59.99</span>",

        "19x30 - Starting Price <span>- $69.99</span>"]


var imageUrl = new Array(); // Store images inside of an Array

        imageUrl[0] = 'http://svgshare.com/i/1Ak.svg';

        imageUrl[1] = 'http://svgshare.com/i/1AQ.svg';

        imageUrl[2] = 'http://svgshare.com/i/1Bb.svg';

        imageUrl[3] = 'http://svgshare.com/i/1Am.svg';

        imageUrl[4] = 'http://svgshare.com/i/1CG.svg';

        imageUrl[5] = 'http://svgshare.com/i/1By.svg';


$('#sliderPrice').html( sizeRange[0] );

$(document).on('input change', '#range-slider', function() { //Listen to slider changes (input changes)
    var v=$(this).val(); //Create a Variable (v), and store the value of the input change (Ex. Image 2 [imageURL])
  
   $('#sliderStatus').html( $(this).val() );
   $('#sliderPrice').html( sizeRange[v] );
  
  $("#img").prop("src", imageUrl[v]); // Modify the Images attribute src based on the sliders value, and input the value inside the imageURL[v] to display image
});

// ::::: Range Slider Thumb ::::: //

$("#range-slider").on("mousedown", function() { //1. When user clicks their mouse down on the Range-Slider
    $(this).removeClass().addClass("thumb-down");//1.1 Remove default class from CSS, and add the class .thumb-down (changes background color)
    $(this).addClass("hover-ring");//1.2 Remove default class from CSS, and add the class .hover-ring (changes box-shadow to a green color)
});

$("#range-slider").on("mouseup", function() { //2. When user mouse-up on Range-Slider
  
    $(this).addClass("thumb-up"); //2.1 Changes thumb color back to light green
  
    $(this).addClass("hover-ring-out"); //2.2 Removes Box-Shadow
});

Comments