Как объеденить круговой слайдер(диапозон) с полем ввода и кнопками + и -?

Здравствуйте, есть скрипт кругового слайдера, оф разрабы тут - https://roundsliderui.com . Но немогу его не как соеденить с отдельным полем ввода цифр и кнопка + и -. Тоесть мне нужно чтобы при наборе в поле цифры, оно менялось и на слайдере (соответственно ползунок должен перемешаться к нужному значению) Так же и при нажатие на кнопки +1 и -1, чтобы число менялось и в поле ввода и в слайдере. Как должно быть:

Пример моего кода:

$("#slider2").roundSlider({     sliderType: "min-range",     circleShape: "pie",     startAngle: "135",     lineCap: "round",     radius: 150,     width: 20,     value: 5, tooltipFormat: "tooltipVal2",      min: 5,     max: 60,          svgMode: true, 	  pathColor: "#eee", 	  borderWidth: 0,      	  startValue: 5,          valueChange: function (e) {     	var color = e.isInvertedRange ? "#FF5722" : "#8BC34A";              $("#slider2").roundSlider({ "rangeColor": color, "tooltipColor": color });     }, 	 	drag:function(args) {          $('#slider-result').html(args.value + " мин") 		$('#sss').html(args.value) 		 if (args.value === 10) { 		  		 $('#slider-result').html(args.value + " 10") 		 } 		  		  $(document).ready(function() {             $('.minus').click(function () {                 var $input = $(this).parent().find('input');                 var count = parseInt($input.val()) - 1;                 count = count < 1 ? 1 : count;                 $input.val(count);                 $input.change( ); 				$input.val = args.value; 				                 return false;             });             $('.plus').click(function () {                 var $input = $(this).parent().find('input');                 $input.val(parseInt($input.val()) + 1);                 $input.change(); 				$input.val = args.value;                 return false;             });         })          } 	 	 	 }); function tooltipVal2(args) {     return args.value + " мин";	 } document.onmousemove = function(e) {  if ($("#slider2").roundSlider("option", "value") === 10 && $("#slider1").roundSlider("option", "value") === 10) {  $('#slider-result1').html('Borri') }} var sliderObj = $("#slider2").data("roundSlider"); sliderObj.setValue(5);

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>  <script src="https://cdn.jsdelivr.net/jquery.roundslider/1.0/roundslider.min.js"></script>  <div id="slider2"></div>     <div id="slider-result"></div>     <div class="number">     <span class="minus">-</span>     <input type="text" value="1" size="5"/>     <span class="plus">+</span> </div>

@import url('https://cdn.jsdelivr.net/jquery.roundslider/1.0/roundslider.min.css');   #slider2 .rs-handle {   background-color: #f3f3f3;   box-shadow: 0px 0px 4px 0px #000; } #slider2 .rs-tooltip-text {   font-size: 25px;   font-weight: bold; }  .rs-tooltip.hover,.rs-tooltip.edit:hover {     border: 1px solid #aaa;     cursor: pointer;  } .rs-handle.rs-move {     cursor: grab; }   .rs-range-color  {     background-color: #ff8d00; } .rs-handle:after  {     background-color: #000000; } .rs-border  {     border-color: #ff8d00; }

Немного еще скажу про слайдер - у него есть параметр как drag:, в которую можно засунуть любую функцию, и она будет работать при изменении значения (value)

Дополнительно:

событие update (ну или drug, я в доку не вникал) слайдера - это источник значения при изменении его слайдером. Здесь получаем это значение и вписываем его в input

метод setValue наоборот устанавливает значение в слайдер

По событию onchange или oninput на поле ввода вы получаете введенное значение и методом setValue устанавливаете его в слайдер.

по кнопкам плюс/минус вы не трогаете слайдер. А устанавливаете значение в инпут и триггерите на инпуте событие onchange/oninput (по этому триггеру сработает обновление слайдера).

то есть у вас почти правильно. только вот эту дичь нужно убрать $input.val = args.value; вообще непонятно, что вы собирались этим сделать.
Добавить слушатель onchange на инпут
И немного поправить drug

• Спасибо за ответ, а можете помочь кодом?
  1) Добавить слушатель onchange на инпут

  2) И немного поправить drug - тут я понимаю что надо как то прифигачить setValue, но как?

  Извените если это глупые вопросы

• Axel030392, примерно так

  $('селектор для инпута').on('change', function(e) { const sliderObj = $("#slider2").data("roundSlider"); sliderObj.setValue(e.target.value); // установить слайдер по значению из инпута }); drag:function(args) { $('селектор для инпута').val(args.value); // ... }

  $('селектор для инпута').on('change', function(e) { const sliderObj = $("#slider2").data("roundSlider"); sliderObj.setValue(e.target.value); // установить слайдер по значению из инпута }); drag:function(args) { $('селектор для инпута').val(args.value); // ... }

  Насчет args.value это я у вас подсмотрел, документацию не читал.

• Спасибо огромное, все отлично работает. Но можете еще подсказать, как поставить ограничители по вводу чисел. Тоесть например как у поля , только для input type="text" и кнопок
• А все понял, спасибо больше нет вопросов))

  $(document).ready(function() { $('.number-minus').click(function () { var $input = $('#vremy-text'); var count = parseInt($input.val()) - 1; count = count < 5 ? 5 : count; $input.val(count); $input.change( ); return false; }); $('.number-plus').click(function () { var $input = $('#vremy-text'); var count = parseInt($input.val()) + 1; count = count > 60 ? 60 : count; $input.val(count); $input.change(); return false; }); })

  $(document).ready(function() { $('.number-minus').click(function () { var $input = $('#vremy-text'); var count = parseInt($input.val()) - 1; count = count < 5 ? 5 : count; $input.val(count); $input.change( ); return false; }); $('.number-plus').click(function () { var $input = $('#vremy-text'); var count = parseInt($input.val()) + 1; count = count > 60 ? 60 : count; $input.val(count); $input.change(); return false; }); })