jQuery addClass example

Change class name on click in jQuery

by Dhanck

HTML

<div id="compare">
  <div id="img1"></div>
  <div id = "img2"></div>
  
  <input type="range" id="slider">
</div>

CSS

#compare{
  margin:15px;
  overflow:hidden;
  width:700px;
  height:400px;
}
#img1, #img2{
  position:absolute;
  height:400px;
  width:100%;
}
#img1{
  background:url('https://technologyadvice.com/wp-content/uploads/2015/02/compare-crms-like-a-pro-01.png') no-repeat;
}
#img2{
  background:url('https://corepointhealth.com/wp-content/uploads/arm-wrestle.png') no-repeat;
}
#slider{
    margin-top: 180px;
    position: absolute;
}
.ui-widget-content{
  background:transparent;
  border:none;
}
.ui-widget-header {
    background: transparent;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border: none;
    background: url('data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNDcgMjQ3Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6IzQyNDI0Mjt9LmNscy0ye2ZpbGw6I2ZmZjtmaWxsLXJ1bGU6ZXZlbm9kZDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmRyYWctcmVzaXplPC90aXRsZT48Y2lyY2xlIGNsYXNzPSJjbHMtMSIgY3g9IjEyMy41IiBjeT0iMTIzLjUiIHI9IjEyMy41Ii8+PGcgaWQ9InRyaWFuZ2xlLWxlZnQiPjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTMwMC40MiwxOTQuMWwzNy0zN2MyLjkxLTIuOTEsNS4yOS0xLjkyLDUuMjksMi4ydjc0Ljg1YzAsNC4xMS0yLjM4LDUuMS01LjI5LDIuMTlsLTM3LTM3QTMuNzYsMy43NiwwLDAsMSwzMDAuNDIsMTk0LjFaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjI5IC03NCkiLz48L2c+PGcgaWQ9InRyaWFuZ2xlLXJpZ2h0Ij48cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik00MDQuOTEsMTk5LjM5bC0zNywzN2MtMi45MSwyLjkxLTUuMywxLjkyLTUuMy0yLjE5VjE1OS4zMmMwLTQuMTIsMi4zOS01LjExLDUuMy0yLjJsMzcsMzdBMy43NiwzLjc2LDAsMCwxLDQwNC45MSwxOTkuMzlaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjI5IC03NCkiLz48L2c+PC9zdmc+');
    border-radius: 50%;
    height: 50px;
    width: 50px;
}

JavaScript

$( "#slider" ).slider({
        range: "min",
                 value: 50,
                 min: 0,
                 max: 100,

                 slide: function (event, ui) {
                     var r = (ui.value); 
                     $("#img2").width(r/($('#img1').width()/100));
                     $("#img2").width(r*($('#img1').width()/100));
				}   
    });
    
//$('#img2').css({'width': $('#img2').width() / 2});
$('#slider').width(($('#img2').width()))