Форум Сайтостроение Веб-строительство

создание формы в HTML5

S3
На сайте с 29.03.2012
Offline
367
Sly32
604

В частности интересует использование инпута типа range. Как сделать отображение выбранного числа? Нашел следующее решение - 


<input type="range" id="range"/>
<div id="result"></div>

код JavaScript


var range  = document.getElementById('range'),
    result = document.getElementById('result');

range.onchange = function() {
    result.innerHTML = range.value;
};var range  = document.getElementById('range'),
    result = document.getElementById('result');

range.onchange = function() {
    result.innerHTML = range.value;
};

Но у меня не работает. Как еще можно оживить бегунок?

вот тут для пробы поставил (наверное уже надоел всем с этой ссылкой - сорри)))

http://www.trutravel.ru/otdyx-v-belarusi/testovaya/

DD
На сайте с 20.05.2010
Offline
54
DmitriyDonetsk
#1
Как сделать отображение выбранного числа?

Вроде, все работает:

http://jsfiddle.net/W7c6K/1/

Изготовление сайтов (CMS Joomla, Wordpress) ( https://searchengines.guru/ru/forum/861077 )
S3
На сайте с 29.03.2012
Offline
367
Sly32
#2
DmitriyDonetsk:
Вроде, все работает:
http://jsfiddle.net/W7c6K/1/

Там и брал код - не работает у меня(((

LEOnidUKG
На сайте с 25.11.2006
Offline
1774
LEOnidUKG
#3

Вы или JS ПОСЛЕ инпутов вставьте или сделайте выполнение JS после отрисовки HTML

✅ Мой Телеграм канал по SEO, оптимизации сайтов и серверов: https://t.me/leonidukgLIVE ✅ Качественное и рабочее размещение SEO статей СНГ и Бурж: https://getmanylinks.ru/ ✅ Настройка и оптимизация серверов https://getmanyspeed.ru/
S3
На сайте с 29.03.2012
Offline
367
Sly32
#4
LEOnidUKG:
Вы или JS ПОСЛЕ инпутов вставьте или сделайте выполнение JS после отрисовки HTML

Можно поподробнее? у меня все скрипыт подключаются отдельным файлом в header.php Это неправильно? как лучше?

Точно! Перенос скрипта в конец файла помог решить проблему! Спасибо.

А может у кого есть ссылка, как сделать бегунок, ограничиваемый по двум параметрам чтоб, например, выбрать диапазон цены

Как к html файлам Помогите решить проблему с Копия сайта при переносе
DD
На сайте с 20.05.2010
Offline
54
DmitriyDonetsk
#5
Sly32:
А может у кого есть ссылка, как сделать бегунок, ограничиваемый по двум параметрам чтоб, например, выбрать диапазон цены

Вот: http://jqueryui.com/slider/#range

Но нужно подключить библиотеку jQuery.

vlad00777
На сайте с 24.12.2009
Offline
119
vlad00777
#6
DmitriyDonetsk:
Но нужно подключить библиотеку jQuery.

А точнее jQuery Ui.

Верстка. Качественно! Адаптивная, резиновая, с параллаксом и прочими плюшками. В ЛС.
S3
На сайте с 29.03.2012
Offline
367
Sly32
#7
DmitriyDonetsk:
Вот: http://jqueryui.com/slider/#range
Но нужно подключить библиотеку jQuery.

Если еще подскажете, в какие переменные записываются мин и макс значения - будет самое то!!!

vlad00777
На сайте с 24.12.2009
Offline
119
vlad00777
#8

Sly32, 

 <script>
  $(function() {
    $( "#slider-range" ).slider({
      range: true,
      min: 0,
      max: 500,
      values: [ 75, 300 ],
      slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
      }
    });
    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
      " - $" + $( "#slider-range" ).slider( "values", 1 ) );
  });
  </script>

А если вы по поводу, когда двигаешь куда записываются, то вроде сюда: ui.values[ 0 ] минимум и ui.values[ 1 ] максимум.

S3
На сайте с 29.03.2012
Offline
367
Sly32
#9
vlad00777:
Sly32, 
 <script>

  $(function() {

    $( "#slider-range" ).slider({

      range: true,

      min: 0,

      max: 500,

      values: [ 75, 300 ],

      slide: function( event, ui ) {

        $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );

      }

    });

    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +

      " - $" + $( "#slider-range" ).slider( "values", 1 ) );

  });

  </script>

А если вы по поводу, когда двигаешь куда записываются, то вроде сюда: ui.values[ 0 ] минимум и ui.values[ 1 ] максимум.

А в php как вытянуть эти значения?

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий