JSFiddle - React, Tailwind, and code Playground

by dhavaljani

HTML

<p>
 
</p>
 <div class="pad">
     <div id="1" class="screen">
         
     </div>
<div id="slider"></div>
     <div class="list">
         <span>Not Sure</span>
         <span>Like</span>
         <span>Love</span>
         <span>OMG</span>
     </div>
</div>

CSS

.pad {
    width: 300px;
    margin-left: 10%;
    background: #f5f5f5;
    height: 400px;
    padding: 15px;
}
.screen {
    height:360px;
}
.res1 {
        height:360px;
    background-color: red;
}
.res2 {
        height:360px;
    background-color: green;
}
.res3 {
        height:360px;
    background-color: blue;
}
.list span {
    display: inline-block;
    width: 24%;
}
/*jquery ui override*/
.ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 1.5em;
    height: 1.5em;
    cursor: default;
    border-radius: 50%;
    outline: 0;
}
.ui-slider-horizontal .ui-slider-handle {
    top: -.4em;
    margin-left: -.7em;
}
.ui-slider-range {
    background-image: none;
    background-color: royalblue;
}

JavaScript

$(function() {
      var classes = {
        1: 'screen',
        2: 'res1',
        3: 'res2',
        4: 'res3'
    }
    $( "#slider" ).slider({
      value:1,
      min: 1,
      max: 4,
      range: "min",
      step: 1,
      slide: function( event, ui ) {
        $("#1").removeClass().addClass(classes[ui.value]);
      }
    });
  });