Creating Range Slider on a wix site

A recent client wanted a rangeslider for a questionnaire that I built for her.
You can check the Questionnaire here:
https://falaksoomro786.wixsite.com/questionairre-wix/questionaire

It gives different outputs based on different response scores.
The 2nd and 6th questions have range sliders. You can add range slider by adding this code to the HTML element :

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Range Input: change live value</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      @import url(https://fonts.googleapis.com/css?family=Dosis:700);
body {

 
  color: #34495e;
  padding-top: 40px;
  text-shadow: white 1px 1px 1px;
}
.value {

  text-align: center;
  font-weight: bold;
  font-size: 2em;
  width: 300px;
  height: 40px;

  margin: 10px auto;

  text-shadow: white 2px 2px 2px;
}
input[type="range"] {
  display: block;
  -webkit-appearance: none;
  background-color: #bdc3c7;
  width: 300px;
  height: 5px;
  border-radius: 5px;
  margin: 0 auto;
  outline: 0;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: #e74c3c;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid white;
  cursor: pointer;
  transition: 0.3s ease-in-out;
}
​ input[type="range"]::-webkit-slider-thumb:hover {
  background-color: white;
  border: 2px solid #e74c3c;
}
input[type="range"]::-webkit-slider-thumb:active {
  transform: scale(1.6);
}

    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <div class="value">18</div>
<input type="range" id="range1" onchange="button_click();" min="1" max="100" step="1" value="18">
  
  

    <script >
	var elem = document.querySelector('input[type="range"]');

var rangeValue = function(){
  var newValue = elem.value;
  var target = document.querySelector('.value');
  target.innerHTML = newValue;
}

elem.addEventListener("input", rangeValue);

 function button_click() {
        window.parent.postMessage(document.getElementById("range1").value, "*");
      }
	</script>

</body>

</html>

and adding this code to the page:

var age;
$w.onReady(function () {
  // when a message is received from the HTML Component
  $w("#html1").onMessage( (event) => {
    age = event.data;
  } );
} );

You can save the output to any variable and then use it for calculations.
Enjoy!

Fluck Soomro
https://www.wix.com/arena/wix-expert/ms-fluck-soomro/portfolio

2 Likes