Дополнительные кнопки кнопки «+/-» в Jquery UI sortable

Если у ползунка Jquery UI Sortable задан очень мелкий шаг (свойство step), то становится не удобно выбирать точное значение. Отдельные кнопки прибавления и уменьшения значения устранят эту неудобность.

Так же в пример добавлена возможность зажимать кнопки для автоматического увеличения или изменения значения.

<!-- Jquery UI sortable -->
<div id="slider"></div>

<!-- Кнопки -->
<button class="slider-btn" data-dir="minus">-0.1</button>
<button class="slider-btn" data-dir="plus">+0.1</button>

<!-- Результат -->
<input type="text" id="val" value="">

<script src="/jquery.min.js"></script>
<script src="/jquery-ui.min.js"></script>
<link rel="stylesheet" href="/jquery-ui.min.css">

<script>
$(function(){
	var pressTimer;	
 
	$('#slider').slider({
		 range: 'min',
		 min: 0,
		 max: 100,
		 value: 50,
		 step: 0.5,
		 slide: function(event, ui){
			$('#val').val(ui.value);
		}
	});
	
	$('.slider-btn').click(function() {
		var $slider = $("#slider");
		var value =$slider.slider("value");
		var min = $slider.slider("option", "min");
		var max = $slider.slider("option", "max");
		var step = $slider.slider("option", "step");
		
		if (value > max){
			value = max;
		} else if (value < min){
			value = min;
		}

		if ($(this).data("dir") == "plus") {
			let val = value + step;
			$slider.slider("value", val);
			 $('#val').val(val);
		} else {
			let val = value - step;
			$slider.slider("value", val);
			$('#val').val(val);
		}
		
		return false;
	});

	$(".slider-btn").mouseup(function(){
		clearTimeout(pressTimer);
	}).mousedown(function(){
		let target = this;
		pressTimer = window.setInterval(function() {
			$(target).trigger('click');
		}, 100);
	}).mouseout(function(){
		clearTimeout(pressTimer);
	});
});
</script>
HTML

Пример:

23.11.2022
100

Комментарии

, чтобы добавить комментарий.

Другие публикации

Как ограничить ввод данных в текстовое поле
Примеры, приведенные ниже позволят ограничить ввод символов в текстовые поле. Например, можно ограничить количество...
40597
+1
Поворот изображения по двум точкам на PHP GD + jQuery UI Droppable
​Задача - необходимо повернуть изображение на угол, найденный путем выставления двух точек на линию горизонта...
1111
0
Перетаскивание элементов Drag and drop (jQuery UI Droppable)
UI Droppable – плагин, который позволяет сделать перетаскивание элементов мышью (Drag&Drop).
3682
+2
Аккордеон jQuery UI
jQuery UI Accordion функциональный плагин аккордеона. Рассмотрим примеры использования.
18472
+6
Календарь jQuery UI Datepicker
DatePicker – хороший и функциональный плагин для выбора даты, легко настраивается и привязывается к стандартному полю ввода формы.
60332
+4
Слайдеры изображений на плагине bxSlider
BxSlider отличный jquery плагин слайдеров и каруселей, адаптивный, легко настраивается, поддерживает любой тип...
13765
+2