Adding Custom Number Scales to the range slider

[nishanthj6]

You can take a look at this issue by running the same snippets of code HERE

Needed to add custom scale numbers to the range slider from the rangeslider.js plugin, so that whenever it slides over the horizontal line it needs to display the selected number range from the console

Actual Result:

Whenever I tried to add custom numbers the whole design including marker gets ruined. Here is the below codes of the snippet which needs to add custom number scales

Code I:

init(1, 10);

function init(min, max) {
  $("#io").append($("<div style='text-align:center;'><div><input type='range' id='slider' min='" + min + "' max='" + max + "' step='1' value='3' data-rangeslider><output id='val'></output></div></div>"));
  $('head').append('<link href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.css" rel="stylesheet" type="text/css">');
  $.getScript("https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.js")
    .done(function(script, textStatus) {
      console.log(textStatus);
      //Preform here
      initRangeSlider($("#slider"));
    });
}

function initRangeSlider(ele) {
  ele.rangeslider({

    // Deactivate the feature detection
    polyfill: false,

    // Callback function
    onInit: function() {
      //valueOutput(this.$element[0]);
    },

    // Callback function
    onSlide: function(position, value) {
      console.log('onSlide');
      console.log('position: ' + position, 'value: ' + value);
    },

    // Callback function
    onSlideEnd: function(position, value) {
      console.log('onSlideEnd');
      console.log('position: ' + position, 'value: ' + value);
    }
  });

}

.rangeslider--horizontal {
  height: 6px !important;
  width: 66% !important;
}

.rangeslider__handle {
  background: white;
  background-image: none;
  background-size: auto;
  border: 1px solid #ccc;
  cursor: pointer;
  display: inline-block;
  width: 24px !important;
  height: 25px !important;
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<b>Range Slider</b><br/>
<div id='io'></div><br/><br/>

Code II:

Here the below code of snippets doesn't seem to fit for my project. This was my actual result when I tried to integrate. So I need to modify the above code I with the below code II snippets

var $r = $('input[type="range"]');
var $ruler = $('<div class="rangeslider__ruler" />');

// Initialize
$r.rangeslider({
  polyfill: false,
  onInit: function() {
    $ruler[0].innerHTML = getRulerRange(this.min, this.max, this.step);
    this.$range.prepend($ruler);
  }
});

function getRulerRange(min, max, step) {
  var range = '';
  var i = 0;

  while (i <= max) {
    range += i + ' ';
    i = i + step;
  }
  return range;
}

.rangeslider,
input[type='range'] {
  max-width: 400px;
  height: 6px !important;
  width: 66% !important;
  float: center !important;
}

.rangeslider__ruler {
  cursor: pointer;
  font-size: .7em;
  margin: 20px 3px 0 3px;
  position: relative;
  top: 100%;
  text-align: justify;
}

// Workaround to justify only one-line.
// Extra element to force a new line.
.rangeslider__ruler:after {
  content: "";
  display: inline-block;
  width: 100%;
}

.rangeslider__handle {
  background: white;
  background-image: none;
  background-size: auto;
  border: 1px solid #ccc;
  cursor: pointer;
  display: inline-block;
  width: 24px !important;
  height: 25px !important;
  position: absolute;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(0, 0, 0, 0.1)));
  background-image: -moz-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
  background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
  -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.min.css" integrity="sha256-F8gzbY2A1VTf49iOrc8Lst/UvcUtoFr3myix0WMiNqA=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.min.js" integrity="sha256-vFhEtGnaQ2xB+yjBTSXxssthNcfdbzu+lmLYhCdp2Cc=" crossorigin="anonymous"></script>

<!--
  rangeslider.js example
  
  https://github.com/andreruffert/rangeslider.js
  by André Ruffert - @andreruffert
-->
<br/>

<input type="range" min="0" max="4" step="0.5">

Here is a resulting snapshot showed after integrating the code II to my project

Expected Result:

---

Code I needs to be integrated/modified taking the code from the Code II snippets

OR

[NotSureMyBrainworx]

I'm having the same problem. Have you been able to find a solution?