将自定义数字刻度添加到范围滑块

Question

要求：

需要从 Rangeslider.js 插件向范围滑块添加自定义刻度数字，以便每当它在水平线上滑动时，都需要从控制台显示选定的数字范围< / p>

实际结果：

每当我尝试添加自定义编号时，包括标记在内的整个设计都会被破坏。这是需要添加自定义数字刻度的代码段的以下代码

代码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/>

代码II：

下面的代码片段似乎不适合我的项目。这是我尝试整合时的实际结果。因此，我需要使用以下代码II 代码段

修改上面的代码I

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">

以下是将代码II 集成到我的项目中后显示的结果快照

---

预期结果：

代码I 需要从代码II 代码段

中获取代码进行集成/修改。

OR

除了 rangeslider.js 插件以外，如果需要的话，还需要执行其他任何步骤。