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:

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" >

  <meta charset="UTF-8">
  <title>Range Input: change live value</title>
    <link rel="stylesheet" href="">

      /* 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(;
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);


    <script src=""></script>



  <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, "*");



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 =;
  } );
} );

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

Fluck Soomro