Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Добрые люди помогите с ползунком jquery ui slider (https://javascript.ru/forum/misc/73225-dobrye-lyudi-pomogite-s-polzunkom-jquery-ui-slider.html)

рони 31.03.2018 08:31

SERblY,
замените строки 8 - 22 на это ...
var minCost = jQuery("input.minCost"),
    maxCost = jQuery("input.maxCost"),
    storage = sessionStorage;
jQuery("#slider").slider({
  min: 0,
  max: 1000000,
  step: 500,
  range: true,
  values: JSON.parse(storage.getItem("values")) ||[0, 1000000],
  stop: function(event, ui) {
    minCost.val(ui.values[0]);
    maxCost.val(ui.values[1]);
    storage.setItem("values", JSON.stringify(ui.values));
    },
    slide: function(event, ui){
    minCost.val(ui.values[0]);
    maxCost.val(ui.values[1]);
    }
});

Nexus 31.03.2018 11:52

SERblY, вы публикуете код представления, оно ничем особо не поможет, т.к. не обрабатывает (и не должно) запрос, а просто отрисовывает страницу.

Можно попробовать заменить участок представления, который отвечает за отрисовку инпутов для слайдера этим:
<div class="col-md">
	<input style="padding-left:3px; padding-right:3px" 
		   class="price_field minCost form-control" 
		   name="{%$id%}[over]" 
		   type="number" 
		   step="500.00" 
		   placeholder="Цена, {%$locale.888%}" 
		   id="bs_{%$field.id%}" 
		   value="{%if isset($smarty.request[$id].over)%}{%$smarty.request[$id].over%}{%else%}0{%/if%}"/>
</div>
<div class="col-md">
	<input style="padding-left:3px; padding-right:3px" 
		   class="price_field maxCost form-control" 
		   name="{%$id%}[less]" 
		   type="number" 
		   step="500.00" 
		   max="1000000" 
		   min="0" 
		   placeholder="Цена, {%$locale.889%}" 
		   id="bs_{%$field.id%}" 
		   value="{%if isset($smarty.request[$id].less)%}{%$smarty.request[$id].less%}{%else%}0{%/if%}"/>
</div>
Если известен метод передачи данных на сервер, то "$smarty.request" нужно заменить на "$smarty.get/post".
"$smarty.request" - не ссылка на глобальную переменную request, подробнее в документации шаблонизатора.

Js заменить этим:
(function() {
	var jQ = jQuery,
		$slider = jQ("#slider"),
		$minField = jQ("input.minCost"),
		$maxField = jQ("input.maxCost");
		
	$minField.add($maxField).change(function() {
		var isMaxField = this.classList.contains('maxCost'),
			minValue = +this.value;
			
		if(isMaxField && +$maxField.val() > +$maxField.attr('max')) 
			$maxField.val($maxField.attr('max') || 0);
			
		if(minValue > +$maxField.val()) 
			this.value = minValue = (+$maxField.val() || 0);
			
		$slider.slider('values', +isMaxField, minValue);
	}).keypress(function(event) {
		var e = e || window.event,
			key = e.keyCode || e.charCode;
			
		if([null, 0, 8, 13, 9, 46, 37, 39].indexOf(key) > -1) 
			return true;
		else if(!/\d/.test(String.fromCharCode(key))) 
			return false;
	});
	
	$slider.slider({
		min: $maxField.attr('min') || 0,
		max: $maxField.attr('max') || 0,
		step: $maxField.attr('step') || 0,
		values: [$minField.val() || 0, $maxField.val() || $maxField.attr('max') || 0],
		range: true,
		stop: function _ui_slider_handler(event, ui) {
			$minField.add($maxField).val(function(i) {
				return ui.values[i];
			});
		},
		slide: _ui_slider_handler
	});
	
})();


Если вывести значения в инпуты не выйдет, то воспользуйтесь вариантом рони.
Если значения выведутся в инпуты, но что-то не будет работать, смотрите консоль, м.б. я где-то допустил в js ошибку (не тестировал).

SERblY 31.03.2018 14:02

Спасибо Вам и Рони Спасибо, я попробую и отпишусь обязательно

SERblY 31.03.2018 14:03

мало ли не я один такой )

SERblY 31.03.2018 14:11

Цитата:

Сообщение от рони (Сообщение 481935)
SERblY,
замените строки 8 - 22 на это ...
var minCost = jQuery("input.minCost"),
    maxCost = jQuery("input.maxCost"),
    storage = sessionStorage;
jQuery("#slider").slider({
  min: 0,
  max: 1000000,
  step: 500,
  range: true,
  values: JSON.parse(storage.getItem("values")) ||[0, 1000000],
  stop: function(event, ui) {
    minCost.val(ui.values[0]);
    maxCost.val(ui.values[1]);
    storage.setItem("values", JSON.stringify(ui.values));
    },
    slide: function(event, ui){
    minCost.val(ui.values[0]);
    maxCost.val(ui.values[1]);
    }
});

все работает, спасибо!, есть какие-то косяки в скрипте ?, последний вопрос, да и он сохраняется все нлорм но по умолчанию он по максимуму, хотя.... это даже лучше, чем могу отблагодарить ? рубли Вы наверное и по больше чем я зарабатываете, извините за бестакность, чем могу помочь конкретно форуму, по поводу верстки всегда пожалуйста, без проблем! Парни Спасибо еще раз!

laimas 01.04.2018 07:18

Цитата:

Сообщение от SERblY
он сохраняется все нлорм но по умолчанию он по максимуму

Вообще для ползунка указание параметров

min: 0,
max: 1000000,
step: 500

это нонсенс, не может он имеет эти значения как константы. Например, пользователь находится на странице группы товаров с минимальной ценой 2000 и максимальной 10000. В этом случае рабочий диапазон ползунка будет сжат, а шаг изменения слишком большой.

Отдавая ползунок пользователю параметры мин/макс и шаг изменения нужно рассчитывать под конкретный диапазон.

SERblY 05.04.2018 14:38

Цитата:

Сообщение от laimas (Сообщение 481989)
Вообще для ползунка указание параметров

min: 0,
max: 1000000,
step: 500

это нонсенс, не может он имеет эти значения как константы. Например, пользователь находится на странице группы товаров с минимальной ценой 2000 и максимальной 10000. В этом случае рабочий диапазон ползунка будет сжат, а шаг изменения слишком большой.

Отдавая ползунок пользователю параметры мин/макс и шаг изменения нужно рассчитывать под конкретный диапазон.

это понятно, это бы вообще в идеале, просто тут уже наверное задача сложнее, как то просить язык не поворачивается хоть с ползунком помогли

laimas 05.04.2018 15:04

Цитата:

Сообщение от SERblY
просто тут уже наверное задача сложнее

Ничего сложно, это не забота клиента, это уже забота сервера, так как он должен выяснить мин/макс значения в базе и отдать их клиенту. Клиенту нужно только поместить их в параметры ползунка.

SERblY 06.04.2018 22:16

как бы эту светлую мысль еще и реальзовать
даже упростить минимальное значение пускай будет 0 всегда а вот максимальное берется из базы самое большое какое есть в базе

laimas 06.04.2018 22:37

Допустим у вас продаются в отделе бублики разных производителей, при этом мин. цена это 50 руб/кг и макс. 80 руб/кг. Вы отдаете клиенту свой ползунок с мин. значением 0 и макс. значением 10000, да еще с шагом 500. В каком месте шкалы будет реально выбрать цену бубликов и возможно ли будет это сделать с шагом 500?

А в другом отделе вы торгуете Жигулями и Лексусами, с мин. ценой 400000 и макс. 4600000. Можно ли будет на вашем ползунке с его диапазоном купить Лексус?

Я не настаиваю, дело хозяйское, но вашим ползунком либо нельзя будет воспользоваться, либо он будет неудобен.


Часовой пояс GMT +3, время: 12:47.