Mobile-compatible Slider Style Rating System In jQuery

A fancy smooth mobile-friendly rating system that enables the user to adjust the rating values by dragging the slider thumb.

It also displays corresponding sad/smile emojis on the top of the slider thumb depending on the current rating value you select.

The slider control is based on jQuery UI slider widget.

How to use it:

1. Create the HTML for the rating slider.

<div class="slider">
  <div class="ui-slider-handle">
    <div class="smiley">
      <svg viewBox="0 0 34 10" version="1.1">
        <path d=""></path>
      </svg>
    </div>
  </div>
  <div class="text">
    <span>Current Value</span>
    <strong>-</strong>
  </div>
</div>

2. Insert the latest version of jQuery and jQuery UI libraries into the document.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

3. Include the jQuery UI Touch Punch for the touch support.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>

4. Set the maximum number of rating values.

var step = 10;

5. Set the path data of the SVG based emoji depending on the rating value.

function setPathData(path, value) {
  var firstStep = 6 / step * value;
  var secondStep = 2 / step * value;
  path.attr('d', 'M1,' + (7 - firstStep) + ' C6.33333333,' + (2 + secondStep) + ' 11.6666667,' + (1 + firstStep) + ' 17,' + (1 + firstStep) + ' C22.3333333,' + (1 + firstStep) + ' 27.6666667,' + (2 + secondStep) + ' 33,' + (7 - firstStep));
}

6. Activate the rating slider.

$(".slider").each(function () {

  var self = $(this);
  var slider = self.slider({
      create: function () {
          self.find('.text strong').text(self.slider('value'));
          setPathData(self.find('.smiley').find('svg path'), self.slider('value'));
      },
      slide: function (event, ui) {
          self.find('.text strong').text(ui.value);
          setPathData(self.find('.smiley').find('svg path'), ui.value);
      },
      range: 'min',
      min: 1,
      max: step,
      value: 1,
      step: 1 });

});

7. The necessray CSS/CSS3 styles for the rating slider.

.slider {
  width: 320px;
  height: 2px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  position: relative;
}
.slider .ui-slider-range {
  border-radius: 2px;
  background: #000;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
}
.slider .ui-slider-handle {
  cursor: move;
  cursor: grab;
  cursor: -webkit-grab;
  width: 32px;
  height: 32px;
  position: absolute;
  outline: none;
  top: 0;
  z-index: 1;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.2);
  margin: -1px 0 0 0;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  transition: box-shadow .3s ease;
}
.slider .ui-slider-handle .smiley {
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #000;
  opacity: 0;
  -webkit-transform: translate(-50%, -12px);
  transform: translate(-50%, -12px);
  transition: all .3s ease 0s;
}
.slider .ui-slider-handle .smiley:before, .slider .ui-slider-handle .smiley:after {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #000;
  position: absolute;
  top: 8px;
}
.slider .ui-slider-handle .smiley:before {
  left: 7px;
}
.slider .ui-slider-handle .smiley:after {
  right: 7px;
}
.slider .ui-slider-handle .smiley svg {
  width: 16px;
  height: 7px;
  position: absolute;
  left: 50%;
  bottom: 5px;
  margin: 0 0 0 -8px;
}
.slider .ui-slider-handle .smiley svg path {
  stroke-width: 3.4;
  stroke: #000;
  fill: none;
  stroke-linecap: round;
}
.slider .ui-slider-handle.ui-state-active {
  cursor: grabbing;
  cursor: -webkit-grabbing;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.32);
}
.slider .ui-slider-handle.ui-state-active + .text {
  -webkit-transform: translate(0, -80px);
  transform: translate(0, -80px);
  transition: -webkit-transform .3s ease 0s;
  transition: transform .3s ease 0s;
  transition: transform .3s ease 0s, -webkit-transform .3s ease 0s;
}
.slider .ui-slider-handle.ui-state-active .smiley {
  opacity: 1;
  -webkit-transform: translate(-50%, -12px);
  transform: translate(-50%, -12px);
  transition: all .3s ease .1s;
}
.slider .text {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  -webkit-transform: translate(0, -44px);
  transform: translate(0, -44px);
  transition: -webkit-transform .3s ease .2s;
  transition: transform .3s ease .2s;
  transition: transform .3s ease .2s, -webkit-transform .3s ease .2s;
  font-size: 16px;
}
.slider .text strong {
  color: #000;
  font-weight: bold;
}

---

This awesome jQuery plugin is developed by Aaron Iker. For more Advanced Usages, please check the demo page or visit the official website.