<!-- Set the initial value for the range input element -->
<input id="ranger" type="range" min="1" max="3" step="1" value="2">

<script>
  $(document).ready(function() {
    // Set the default slider position to 2nd point
    $('#ranger').val(2).change(); // This sets the handle to the value '2' on load
    
    // Initialize the rangeslider plugin
    $('input[type="range"]').rangeslider({
      polyfill: false,
      rangeClass: 'rangeslider',
      fillClass: 'rangeslider__fill',
      handleClass: 'rangeslider__handle',
      onInit: function() {
        // Sync initial handle position
        $('.rangeslider__handle').attr('data-content', $('#ranger').val());
      },
      onSlide: function(position, value) {
        $('.rangeslider__handle').attr('data-content', value);
        $('.done').removeClass('active');
        $('.slide').addClass('active');
      },
      onSlideEnd: function(position, value) {
        $('.done').addClass('active');
        $('.slide').removeClass('active');
      }
    });
  });
</script>