Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Перемещение ползунка range и отображение элементов

Здравствуйте.

Есть ползунок type="range". При перемещении выводится число.

Как под этим ползунком отображать элементы(несколько) в зависимости от this.value?

Например:
Диапозон от 0 - 1000 шаг 100

Если ползунок на 100
Выводим один элемент
Если ползунок на 200
Выводим второй элемент

и т.д.

Если ползунок возвращаем на место, то элементы пропадают

Элементы в виде четырех ul li
Ответ: Если эти методы применять, то там размеры по умолчанию как бы фиксированные, к тому же все li пилькают.

Так вот как бы сделать чтобы вот я веду ползунок, а появляются один за одним ul li

Добавлено через 2 часа 4 минуты
Т.е. нет ul li, далее начал двигать, отобразил один ul и в нем один li, далее еще двинул ползунок, в этом ul отобразил еще li а страница как бы растет по высоте (т.е. изначально нет этих объектов).
Вопрос: объединение ползунока и input в jquery ui

Здравствуйте.
Хочу реализовать такую штуку, что например если вводишь в input значение, то ползунок передвигался автоматом, и следовательно если таскаешь ползунок, то в input меняются числа

Все сделал кроме одного - когда вводишь в input значение, то ползунок не передвигается.

<div class="calc">
	<div class="text"><p>Введите сумму </p><input type="text" id="maxCost" class="ival" placeholder="150 000"><p class="color"> руб.</p></div>
	<div id="slider-range"></div>
</div>


$("#slider-range").slider({
				      range: "min",
				      min: 1500,
				      max: 250000,
				      value: 150000,
				      step: 500,
				      stop: function(event, ui) {
				      	$( ".val1" ).text( ui.value );
				      	$( ".ival" ).val( ui.value );
	    			},


				      slide: function( event, ui ) {
				        $( ".val1" ).text( ui.value );
				        $( ".ival" ).val( ui.value );
				      }
				    });


Заранее спасибо всем за помощь
Ответ: спасибо за наводку
Цитата:
в сладере продублировать параметр slide в change
в инпуте сделать обработку change с установкой сладера в значение инпута.
с параметром change не давало вводить данные, бросало постоянно в конец value
я сделал проще, просто добавил на инпут при keyup value инпута = value ползунка и все заработало
Вопрос: Вывод значения ползунка

Подскажите пожалуйста, можно ли вывести значения на экран от стандартного ползунка?

HTML5
1
<input id="calc" type="range"  min="1" max="100" value="1">
То есть чтобы отображалось какое значение сейчас выбрано на ползунке, а так же при перемещении его оно изменялось
Ответ:
Сообщение от maxi11115
То есть чтобы отображалось какое значение сейчас выбрано на ползунке, а так же при перемещении его оно изменялось
По поводу ползунка не знаю, но координаты указателя мыши можно... На js, html тут не поможет...
Вопрос: Зависимость шага 2го ползунка от позиции первого

Заранее извиняюсь за криворукость - совершенно не знаю яву.. но старательно учусь

В идеале необходимо сделать так:

2 ползунка
slider -главный, slider2 - "в подчинении"

1 имеет шкалы для перемещения 30,40,50,70,80,90,100,120,150 <- задачу, по изменению линейного шага я преодолел...
2 меняет свои шкалы в зависимости от позиции 1го ползуна.. т.е.:
при текущем значении 1 = 30, шкалы у 2го = 30,40, при 1 = 40 - у второго = 30,40,60 и т.д. для разных позиций разные комбинации.

Впоследствии каждой из комбинаций присвоить значение числовое (цена) - которое будет выводиться клиенту. В общем калькулятор на ползунках с нелинейными делениями ползунка с присвоением констант к каждой из комбинаций

Пока вышла вот такая муть...


Помогите советом - буду признателен!
Ответ:
Сообщение от рони
нет проблем , в коде мало что изменится. пишите обьект для всего диапазона.
Блин, вот плох, когда и яву не знаешь и с ораторскими навыками хреново )))
Чтобы прям вот конкретно понять, что я хочу попробую на X, Y, G, Z объяснить... X - текущая шкала 1, Y - шкалы ползунка 2, G = текущее значение шкалы 2, Z = ценник, присваиваемый комбе позиций X и G.
Дабы не оставалось комбинаций с 1 значением в шкале убрал величину 150, где только 1 размер 100х150 былбы... - и хнер с ним

X = 30 -> Y = 30, 40
X = 40 -> Y = 30, 40, 60
X = 50 -> Y = 50, 70
X = 60 -> Y = 40, 60, 90
X = 70 -> Y = 50, 70, 100
X = 80 -> Y = 80, 120
X = 90 -> Y = 60, 90
X = 100 -> Y = 70, 100
X = 120 -> Y = 80, 120

X=30 & G=30 -> Z = 905,
X=30 & G=40 и X=40 & G=30 -> Z = 1095,
X=40 & G=40 -> Z = 1305,
X=40 & G=60 и X=60 & G=40 -> Z = 1730,
X=50 & G=50 -> Z = 1755,
X=50 & G=70 и X=70 & G=50 -> Z = 2230,
X=60 & G=60 -> Z = 2255,
X=60 & G=90 и X=90 & G=60 -> Z = 3045,
X=70 & G=70 -> Z = 3000,
X=70 & G=100 и X=100 & G=70 -> Z = 3670,
X=80 & G=80 -> Z = 3500,
X=80 & G=120 и X=120 & G=80 -> Z = 4655,
X=80 & G=80 -> Z = 3500,
X=90 & G=90 -> Z = 4200,
X=100 & G=100 -> Z = 4755,
X=120 & G=120 -> Z = 6305,

Сообщение от рони
не осилил. попытайтесь дополнить информацию.
вроде дополнил, но сомневаюсь что смог описать корректно...
Вопрос: События ползунка

Здравствуйте. Начал изучать JQuery. Обрабатываю события ползунка range. Хочу, чтобы во время его перемещения менялось значение в текстовом поле. Использую событие .change. Но значение в текстовом поле изменяется только после того, как я отпускаю ползунок. Скажите, пожалуйста, какое событие отвечает именно за перемещение ползунка?

HTML5
1
2
3
4
5
6
7
8
9
10
11
<html>
    <head>
        <script src="jquery-2.2.2.js"></script>
    </head>
    <body>
        <form method="post" action="" id="form_id">
            <input type="text" name="I" id="I">
        <input type="range" min="1" max="500" step="0.5" value="50" id="range_I"> 
        </form>
    </body>
</html>
Javascript
1
2
3
4
5
<script>
    $("#range_I").change(function () {
        I.value=range_I.value;
    });
</script>
Ответ:
Сообщение от Wanderer Andrew
какое событие отвечает именно за перемещение ползунка?
Событие input должно вам подойти.
Вопрос: Калькулятор с ползунками

Добрый день. Создаю калькулятор с ползунками, первая проблема в том что при запуске скрипта пишет [object Object] а не начальное значение, вторая проблема я не могу вывести данные из слайдера с ползунком чтобы в дальнейшем делать с ними математические вычисления, и собственно потом выводить эти вычисления на экран, следующая проблема не могу сделать чтобы значения выводились мгновенно, без обновления страницы (тк сказать "живой" калькулятор) Прошу помочь разобраться с этими проблемами. Ссылка на jsfiddle:
Сам код:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
$(document).ready(function() {
    var client = 0,
        check = 0,
        year = 0,
        total = 0;
   $("#summ span").text("0");
       $("#slider-range").slider({
      range: "min",
      min: 1,
      max: 500,
      value: 37,
      slide: function( event, ui ) {
        $( "#amount" ).val(ui.value );
      }
    });
    $( "#amount" ).val($("#slider-range" ).slider( "value" ));
$("#amount").each(function() {
client = parseInt($("#amount").val())
});
     $("#summ span").text(client);
    
$("#slider").slider({
      range: "min",
      min: 1,
      max: 500,
      value: 0,
      slide: function( event, ui ) {
        $( "#amount" ).val(ui.value);
      }
    });
    $( "#amount" ).val($( "#slider-range" ).slider( "value" ));
   
$("#slider2").slider({
      range: "min",
      min: 1,
      max: 100,
      value: 37,
      slide: function( event, ui ) {
        $( "#amount2" ).val(ui.value );
      }
    });
    $( "#amount2" ).val( "$" + $( "#slider-range" ).slider( "value" ));
 
$("#slider3").slider({
      range: "min",
      min: 1,
      max: 10,
      value: 37,
      slide: function( event, ui ) {
        $( "#amount3" ).val(ui.value );
      }
    });
    $( "#amount3" ).val( "$" + $( "#slider-range" ).slider( "value" ));
/*
$("#amount").each(function() {
client = parseInt($("#amount").val())
});
$("#amount2").each(function() {
check = parseInt($("#amount2").val())
});
$("#amount3").each(function() {
year = parseInt($("#amount3").val())
});
total = year * check * client;
   $("#summ span").text("total");
}; 
*/
                      });
Добавлено через 2 часа 59 минут
исправил первую ошибку, но посчитать так и не получается
Ответ: Padimanskas,
Считает так как нужно, осталось решить проблему с конфликтом в слайдерах, почему то при смещении ползунка на втором и третьем слайдере двигают первый либо к максимальному значению либо к минимальному, помогите разобраться , так же буду благодарен, если поможете в исправлении "грамматических" ошибок или использовании более простых методов в коде
Вопрос: Что лучше Фильтр ползунками или Флажками?

Всем привет!

Хочу провести некий опрос!

но сночало объясню суть

Все думаю знают что такое свойства товаров

если кто то не знает расскажу

Свойства товаров на сайте или в программе это набор текстовой информации о товара (характеристики товара)

как например для мобильного телефона свойства могут быть следующие

Операционная система Android
Размер оперативной памяти 1Gb
Размер дискового пространства 16 Gb

представим себе картину

возьмем несколько телефонов пусть будет их три шт

Телефон 1

Операционная система Android
Размер оперативной памяти 1Gb
Размер дискового пространства 16 Gb

телефон 2


Операционная система Android
Размер оперативной памяти 2Gb
Размер дискового пространства 32 Gb

телефон 3


Операционная система Android
Размер оперативной памяти 8Gb
Размер дискового пространства 16 Gb

Итак перейдем к сути

представим что на сайте Вы перешли по категории мобильные телефоны

Далее перед Вами сайт показал Область с картинкой телефона и его описанием ценой и т д

а так же с вела или с права область где выведены данные свойства


Операционная система Android
Размер оперативной памяти 1Gb
Размер дискового пространства 16 Gb

Вопрос как Вам было бы удобнее работать с сайтом

1. если все свойства бы выводились в виде флажков

2. если некоторые свойства (которые несут в себе информацию в виде числа) выводились в виде ползунков (как фильтр по цене)
(это такие свойства как Размер оперативной памяти 1Gb,
Размер дискового пространства 16 Gb
Ответ: () Просто дай выбор из 2-х вариантов флажки или ползунки.
если числовые диапозоны и их много, корректнее ползунки использовать, в остальных случаях можно и флажками обойтись
Вопрос: Как сделать фильтр ползунок jquery

Для интернет магазина нужен фильтр ползунок для фильтрации цен товаров.
Примеров много в интернете , но нет реализации . Как можно сделать сортировку по javascript ,jquery ,ajax и взять элементы сортировки из базы данных.Хочу сделать сортировку без php+mysql.Только javascript ,jquery ,ajax, mysql.
Ответ: Подскажите как сделать фильтрацию по цене от - до указанной в input(ах), нужно показать все строки в пределах цены
<table class="sort">
<tr>					
					<td width="168" rowspan="2">
						<a
							class="thumb vtop inlblk rel tdnone linkWithHash scale4 detailsLink "
							href="http://olx.ua/obyavlenie/nokia-3250-noviy-black-IDhvvvO.html#1e109ae6e9" title="">
														    <img class="fleft" src="http://img02.olx.ua/images_slandocomua/276495120_1_261x203_nokia-3250-noviy-black-kiev.jpg" alt="Nokia 3250 (НОВИЙ) Black">
                                                                                                                						</a>
					</td>
					<td valign="top">
						<div class="space rel">
							<h3 class="x-large lheight20 margintop5">
                                                                								<a href="http://olx.ua/obyavlenie/nokia-3250-noviy-black-IDhvvvO.html#1e109ae6e9" class="marginright5 link linkWithHash detailsLink">
									<strong>Nokia 3250 (НОВИЙ) Black</strong>
								</a>
							</h3>
							<p class="color-9 lheight16 margintop5">
								<small class="breadcrumb x-normal">
																	Телефоны » Мобильные телефоны
																</small>
							</p>
						</div>
					</td>
					<td width="170" class="wwnormal tright td-price" valign="top">
						<div class="space rel">
													<p class="price">
								<strong>700 грн.</strong>
							</p>

														                            						                            												</div>
                        					</td>
	</tr>
     <tr>
                    <td valign="bottom">
                        <div class="space rel">
                            <p class="color-9 lheight16 marginbott5">
                                <small class="breadcrumb x-normal">
                                    <span>
                                        Киев, Оболонский                                    </span>
                                </small>
                            </p>
                            <p class="color-9 lheight16 marginbott5 x-normal">
                                Сегодня 00:56                            </p>
                        </div>
                    </td>
					<td width="85" class="tright" valign="bottom">
						<div class="space rel">
														<div class="rel observelinkinfo inlblk zi3">
								<a href="#" class="{id:258949250} observe-link inlblk lheight16 tdnone tcenter margintop5 vishid " data-statkey="ad.observed.list">
									<span class="icon inlblk observe2 observed-258949250">&nbsp;</span>
									<span class="link x-small gray2 block lheight14">
										<span>  </span>
									</span>
								</a>
								<div class="suggesttitleright small top abs zi2 br4 hidden">
									<p></p>
									<div class="target abs icon"></div>
								</div>
							</div>
													</div>
					</td>
	</tr>
			

	<tr>					
					<td width="168" rowspan="2">
						<a
							class="thumb vtop inlblk rel tdnone linkWithHash scale4 detailsLink "
							href="http://olx.ua/obyavlenie/prodam-nokia-3250-IDhvrr6.html#1e109ae6e9" title="">
														    <img class="fleft" src="http://img02.olx.ua/images_slandocomua/276468016_1_261x203_prodam-nokia-3250-desna.jpg" alt="Продам NOKIA 3250">
                                                                                                                						</a>
					</td>
										<td valign="top">
						<div class="space rel">
							<h3 class="x-large lheight20 margintop5">
                                <span class="courierbadge inlblk rel">
	<span class="icon mini courier2 inlblk marginbott-5">&nbsp;</span>
	<div class="suggesttitle top abs zi5 br3 normal hidden">
		<p class="color-6 lheight18">
			Продавец отправит товар с возможностью проверить и оплатить его при получении.		</p>
		<a class="fright margintop5" href="http://olx.ua/about-shipping/" target="_blank">Узнать больше &raquo;</a>
		<div class="suggest-bound abs"></div>
		<span class="icon target abs"></span>
	</div>
</span>
                                								<a href="http://olx.ua/obyavlenie/prodam-nokia-3250-IDhvrr6.html#1e109ae6e9" class="marginright5 link linkWithHash detailsLink">
									<strong>Продам NOKIA 3250</strong>
								</a>
							</h3>
							<p class="color-9 lheight16 margintop5">
								<small class="breadcrumb x-normal">
																	Телефоны » Мобильные телефоны
																</small>
							</p>
						</div>
					</td>
					<td width="170" class="wwnormal tright td-price" valign="top">
						<div class="space rel">
													<p class="price">
								<strong>500 грн.</strong>
							</p>

														<span class="normal inlblk pdingtop5 lheight16 color-2">Договорная</span>
														                            						                            												</div>
                        					</td>
	</tr>
     <tr>
                    <td valign="bottom">
                        <div class="space rel">
                            <p class="color-9 lheight16 marginbott5">
                                <small class="breadcrumb x-normal">
                                    <span>
                                        Десна                                    </span>
                                </small>
                            </p>
                            <p class="color-9 lheight16 marginbott5 x-normal">
                                Вчера 22:47                            </p>
                        </div>
                    </td>
					<td width="85" class="tright" valign="bottom">
						<div class="space rel">
														<div class="rel observelinkinfo inlblk zi3">
								<a href="#" class="{id:258929676} observe-link inlblk lheight16 tdnone tcenter margintop5 vishid " data-statkey="ad.observed.list">
									<span class="icon inlblk observe2 observed-258929676">&nbsp;</span>
									<span class="link x-small gray2 block lheight14">
										<span>  </span>
									</span>
								</a>
								<div class="suggesttitleright small top abs zi2 br4 hidden">
									<p></p>
									<div class="target abs icon"></div>
								</div>
							</div>
													</div>
					</td>
	</tr>
			

	
	
	
	
</table>

пробовал по вашему примеру с ползунком, но ничего не выходит
Вопрос: Можно ли "ползунок" использовать вместе с ломанной линией?

Добрый день
Помогите, пожалуйста, понять как можно сделать следующее:

как можно привязать ползунок к кривой линии, т.е. когда его перемещаешь от одной точки к другой предыдущий текст скрывается, а появляется тот, который принадлежит текущей точке.
Ответ: nina_, просто кликать по точкам и всё зачем ползунок, а так при желании и знании можно и видео игру сделать, но нужно ли...
Вопрос: Можно ли связать 2 ползунка Jquery UI?

Код

<form id="reservation">
    <label for="minbeds">Minimum number of beds</label>
    <select name="minbeds" id="minbeds">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
        <option>11</option>
        <option>12</option>
    </select>
</form>

<form id="reservation-second">
    <label for="minbeds-second">Minimum number of beds</label>
    <select name="minbeds-second" id="minbeds-second">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
        <option>11</option>
        <option>12</option>
    </select>
</form>


Код

$(function() {
    var select = $( "#minbeds" );
    var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
        min: 1,
        max: 12,
        range: "min",
        value: select[ 0 ].selectedIndex + 1,
        slide: function( event, ui ) {
            select[ 0 ].selectedIndex = ui.value - 1;
        }
    });
    $( "#minbeds" ).change(function() {
        slider.slider( "value", this.selectedIndex + 1 );
    });
});


Кто может подсказать, как можно связать 2 ползунка, так чтобы при движении 1го двигался так же и второй, но двигать второй нельзя было бы?
кто может подсказать?)
Ответ:
Цитата(Pierre @ 18.4.2016,  12:28)
попробовал получая позицию 1го ползунка, назначать его 2му, но по какой то причине он отстает на 1ну единицу.... хотя позиция в пикселах что у 1го что у 2го одинаковая, но перемещаешь вперед первый, допустим на значение 10, то 2й останавливается на значении 9, а если обратно переместить, 1й с 10й позиции на 5ю, то второй переметится на 6ю... и никак не могу понять в чем приколюха.

благодарю за науку