JSFiddle - React, Tailwind, and code Playground

Bootstrap 3 Jquery Yakabox

by DugSohn

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pretty-checkbox/3.0.0/pretty-checkbox.min.css">
  <h1>As Slider</h1>
<div class="container" style="width:300px">
  <div class="ui-yakabox-matter-slider">

    <h1 id="amount" class="text-center">
      <i class="fa fa-star fa-2x fa-gold" id="33"></i>
      <i class="fa fa-star fa-2x fa-gold " id="66"></i>
      <i class="fa fa-star fa-2x fa-gold " id="99"></i>
    </h1>
    <div id="slider-range" class="text-center"></div><br />
  </div>
</div>

<p>
  <h1>As Checkbox</h1>
  <div class="container ui-matter-meter-checkbox" style="width:300px">
    <div class="pretty p-icon p-toggle p-plain"><input type="checkbox">
      <div class="state p-warning-o p-off"><i class="fa fa-star"></i><label class="label-left">Matters</label></div>
      <div class="state p-on"><i class="fa fa-star fa-gold"></i> <label class="label-left">Matters</label></div>
    </div>
    <div class="pretty p-icon p-toggle p-plain"><input type="checkbox">
      <div class="state p-warning-o p-off"><i class="fa fa-star"></i> <label></label></div>
      <div class="state p-on"><i class="fa fa-star fa-gold"></i> <label></label></div>
    </div>
    <div class="pretty p-icon p-toggle p-plain"><input type="checkbox">
      <div class="state p-warning-o p-off"><i class="fa fa-star"></i> <label class="label-right">Matters Most</label></div>
      <div class="state p-on"><i class="fa fa-star fa-gold"></i>  <label class="label-right">Matters Most</label></div>
  ...

SCSS

body {
  margin: 15px;
}
p {
  margin: 10px 0 10px 0;
}
.ui-yakabox-matter-slider {
	position: relative;



#slider-range {
  width: 155px;
  margin-top: 10px;
	position: absolute;
	top:23px;
	left: 58px;
	opacity: .7;
	.ui-widget-header {
		background-image:none;
		background-color:gold;
		border:1px solid white;
		opacity:.8;
		
	}
	
}
.fa-star {
    color: lightgray;
		  -webkit-background-clip: text;
     -moz-background-clip: text;
          background-clip: text;
}

.fa-gold {
	color: gold;

}
.ui-slider-handle {
	border-radius:20px;
	background-image:none;
	background-color:#fff;
	
}

}

.ui-matter-meter-checkbox {
	
	.pretty {
		margin-right:10px;
		width:72px;
	}

.fa {
	font-size:75px;
	color:#ececec;
}

.fa-gold {
	color: gold;
}


label {
	position:absolute !important;
	top: 30%;
	font-size:24px;
	text-transform: uppercase;
}

.label-left {
	left:-220%;
}
.label-right {
	left:75%	
}
}

JavaScript

$(document).ready(function() {
  $(function() {
    $("#slider-range").slider({
      range: true,
      min: 0,
      step: 50,
      max: 100,
      values: [0, 100],
      slide: function(event, ui) {
        $('.fa').css('opacity', '.7')
      },
      stop: function(event, ui) {
        console.log($("#slider-range").slider("values"));
        var starRight = $("#slider-range").slider("values", 0);
        var starLeft = $("#slider-range").slider("values", 1);
        $('.ui-yakabox-matter-slider').find('.fa').css('opacity', '1')



        if (starRight == 0 && starLeft == 100) {
          $('.ui-yakabox-matter-slider').find('.fa-star').addClass('fa-gold');
        } else if (starRight == 0 && starLeft == 50) {
          $('#33').addClass('fa-gold');
          $('#66').addClass('fa-gold');
          $('#99').removeClass('fa-gold');

        } else if (starRight == 50 && starLeft == 100) {
          $('#33').removeClass('fa-gold');
          $('#66').addClass('fa-gold');
          $('#99').addClass('fa-gold');

        } else if (starRight == 0 && starLeft == 0) {
          $('#33').addClass('fa-gold');
          $('#66').removeClass('fa-gold');
          $('#99').removeClass('fa-gold');

        } else if (starRight == 100 && starLeft == 100) {
          $('#33').removeClass('fa-gold');
          $('#66').removeClass('fa-gold');
          $('#99').addClass('fa-gold');
        } else if (starRight == 50 && starLeft == 50) {
          $('#33').removeClass('fa-gold');
          $('#66').addClass('fa-gold');
          $('#99').removeClass('fa-gold');
        }

      }
    });
  });
});

$('.ui-matter-meter-checkbox input').change(function() {

//if left and right star are checked, check all three

if ( $('.ui-matter-meter-checkbox .pretty:first-child input').is(':checked') && 
 $('.ui-matter-meter-checkbox .pretty:last-child input').is(':checked')) {

$('.ui-matter-meter-checkbox .pretty input').prop('checked', true);;
 }

});