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

Question

[Axel030392]

Здравствуйте, есть скрипт кругового слайдера, оф разрабы тут - 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)

Answer 1

[Сергей delphinpro]

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

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

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

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

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

Comments

[Axel030392]

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

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

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

[Сергей delphinpro]

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

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

drag:function(args) {
    $('селектор для инпута').val(args.value);
    // ...
}

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

[Axel030392]

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

[Axel030392]

А все понял, спасибо больше нет вопросов))

$(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;
            });
			
			
			
        })