JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div class="view">
  <img class="down" src="http://media.campustimes.org/2011/12/thumbs-down.png"  />
  <div class="slider"></div>
  <img class="up" src="http://3.bp.blogspot.com/-4R5Yg0oBm6w/UFBCElfc3eI/AAAAAAAAADI/jVQqP6cksjQ/s1600/Thumbs-up-icon.png" />
</div>
<div class="view">
  <img class="down" src="http://media.campustimes.org/2011/12/thumbs-down.png"  />
  <div class="slider"></div>
  <img class="up" src="http://3.bp.blogspot.com/-4R5Yg0oBm6w/UFBCElfc3eI/AAAAAAAAADI/jVQqP6cksjQ/s1600/Thumbs-up-icon.png" />
</div>
<div class="view">
  <img class="down" src="http://media.campustimes.org/2011/12/thumbs-down.png"  />
  <div class="slider"></div>
  <img class="up" src="http://3.bp.blogspot.com/-4R5Yg0oBm6w/UFBCElfc3eI/AAAAAAAAADI/jVQqP6cksjQ/s1600/Thumbs-up-icon.png" />
</div>

CSS

.view{
  padding: 20px;
}
h1 {
    font-family: Helvetica, Arial;   
    font-weight: bold;
    font-size: 18px;
}

body, p{
    font-family: Helvetica, Arial;
}
#slider{
  width: 100px;
  display: inline-block;
}
img{
  height: 20px;
  display: inline-block;
  opacity: .4;
  padding-left: 15px;
  padding-right: 15px;
}

JavaScript

$('img.up, img.down').css('opacity','.4');
$(".slider").slider({
  value:50,
  min: 0,
  max: 100,
  step: 50,
  slide: function( event, ui ) {
    if (ui.value == 50) {
      $(this).parent().find('img.up, img.down').css('opacity','.4');
    }
    if (ui.value >= 51) {
      $(this).parent().find('img.up').css('opacity','.8');
    }
    if (ui.value <= 49) {
      $(this).parent().find('img.down').css('opacity','.8');
    }
  }
});