Добавление пользовательских числовых шкал в ползунок диапазона

#javascript #jquery #css #html #rangeslider

#javascript #jquery #css #HTML #rangeslider

Вопрос:

Требование:

Необходимо добавить пользовательские числовые шкалы к ползунку диапазона из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 с помощью приведенных ниже фрагментов кода II

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

Вот результирующий снимок, показанный после интеграции code II в мой проект

введите описание изображения здесь


Ожидаемый результат:

Код I необходимо интегрировать / модифицировать, взяв код из фрагментов кода II

введите описание изображения здесь

или

введите описание изображения здесь

Помимо rangeslider.js плагина, если в случае, если необходимо выполнить какие-либо другие процедуры.

Комментарии:

1. что вы имеете в виду под пользовательскими числами? вам нужен ползунок между значениями от x до y?

2. Да! Конечно, не ч / б два нет, т. Е. Только один скользящий маркер, показывающий выбранный диапазон @Patte