javascript - 将自定义数字比例添加到范围滑块

Question

要求：

需要从Rangeslider.js插件向范围滑块添加自定义比例数字 ，以便每当它滑过水平线时，它需要从控制台显示选定的数字范围

实际结果：

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

代码一：

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片段修改上面的代码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片段中获取代码

或者

除了rangeslider.jsplugin if in case，如果还有其他程序需要遵循。

标签： javascriptjquerycsshtmlrangeslider