jQuery UI Slider: Right-to-Left with Value Display (Range 1-5)

Here's an example of how you can achieve a jQuery UI slide with range 1 to 5, with a value showing and a single selector starting from zero, and with the slide moving from right to left:

HTML:

<div id='slider'></div>
<input type='text' id='sliderValue' value='0'>

CSS:

#slider {
  width: 200px;
  margin: 20px auto;
}

#slider .ui-slider-range {
  background-color: #5cb85c;
}

#slider .ui-slider-handle {
  background-color: #5cb85c;
  border-radius: 50%;
  border: none;
  height: 20px;
  width: 20px;
  top: -8px;
}

#slider .ui-slider-handle:after {
  content: '';
  background-color: #fff;
  border-radius: 50%;
  height: 10px;
  width: 10px;
  margin: 5px;
  display: block;
}

#sliderValue {
  width: 50px;
  margin: 10px;
  text-align: center;
}

JavaScript:

$(function() {
  $('#slider').slider({
    range: 'min',
    min: 0,
    max: 5,
    value: 0,
    slide: function(event, ui) {
      $('#sliderValue').val(ui.value);
    }
  });
  $('#sliderValue').val($('#slider').slider('value'));
});

To make the slide move from right to left, you can add the following CSS:

#slider .ui-slider-range {
  right: 0;
  left: auto;
}

This will position the slider range on the right side of the slider track instead of the left.