Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery][HTML5] rangeSlider - aktualizacja w locie "wartości suwaka" przy wykorzystaniu pola input
Forum PHP.pl > Forum > Po stronie przeglądarki
swiezak
Witam Forumowiczów.
W swoim projekcie zaprzągłem do pracy skrypt (rangeSlider).

Moim celem jest przerobienie oryginalnego skryptu w taki sposób, aby użytkownik mógł posługiwać się zarówno "suwakiem", jak i polem input, wprowadzając tym samym swoją wagę lub wzrost i aby te zmiany były "od razu widoczne".
Oryginalny kod ma co prawda takie rozwiązanie, ale nie jest dla mnie wystarczające (sekcja "Programmatic value changes" na stronie domowej rangeSlider'a) - tam trzeba kliknąć na przycisk, aby wartość na suwaku uległa zmianie, co powoduje w moim przypadku submit całego formularza z pytaniami w ankiecie.

Kod HTML5:
  1. <div class="range">
  2. <label for="answer_text[1]">Waga (kg)</label>
  3. <input id="chanceSlider1" name="answer_text[1]" type="range" min="25" max="250" step="0.1" value="50" data-rangeslider>
  4. <div id="ch1"><output></output></div>
  5. <input id="chance1" name="chance1" type="text" value="50">
  6. </div>
  7. <div class="range">
  8. <label for="answer_text[2]">Wzrost (cm)</label>
  9. <input id="chanceSlider2" name="answer_text[2]" type="range" min="120" max="250" step="0.1" value="50" data-rangeslider>
  10. <div id="ch2"><output></output></div>
  11. <input id="chance2" name="chance2" type="text" value="120">
  12. </div>


Kod JS:
  1. (function($) {
  2. var $document = $(document);
  3. var selector = '[data-rangeslider]';
  4. var $element = $(selector);
  5.  
  6. // For ie8 support
  7. var textContent = ('textContent' in document) ? 'textContent' : 'innerText';
  8.  
  9. function valueOutput(element) {
  10. var value = element.value;
  11. var output = element.parentNode.getElementsByTagName('output')[0] || element.parentNode.parentNode.getElementsByTagName('output')[0];
  12.  
  13. output[textContent] = value;
  14. }
  15.  
  16. $document.on('input', 'input[name="answer_text"], ' + selector, function(e) {
  17. valueOutput(e.target);
  18. });
  19.  
  20. $('#chanceSlider1').on('input change', function(){
  21. $('#chance1').val($('#chanceSlider1').val());
  22. });
  23. $('#chance1').on('keyup', function(){
  24. $('#ch1 output').val($('#chance1').val());
  25. });
  26.  
  27. $('#chanceSlider2').on('input change', function(){
  28. $('#chance2').val($('#chanceSlider2').val());
  29. });
  30. $('#chance2').on('keyup', function(){
  31. $('#ch2 output').val($('#chance2').val());
  32. });
  33. /*
  34. $document.on('click', '#js-example-change-value button', function(e) {
  35. var $inputRange = $(selector, e.target.parentNode);
  36. var value = $('input[name="answer_text"]', e.target.parentNode)[0].value
  37.  
  38. $inputRange.val(value).change();
  39. });
  40. */
  41. $element.rangeslider({
  42. polyfill: false,
  43. onInit: function() {
  44. valueOutput(this.$element[0]);
  45. },
  46. onSlide: function(position, value) {
  47. console.log('onSlide');
  48. console.log('position: ' + position, 'value: ' + value);
  49. },
  50. onSlideEnd: function(position, value) {
  51. console.log('onSlideEnd');
  52. console.log('position: ' + position, 'value: ' + value);
  53. }
  54. });
  55. })(jQuery);


Po przeróbkach skrypt reaguje na wpisane wartości do pola input, zmienia wartość w <output>, ale nie zmienia wartości suwaka (<input id="chanceSlider1">) - stoi w miejscu, jak zaklęty. Nie za bardzo wiem, w jaki sposób to poprawić. Zdaję sobie sprawę, że mój kod nie jest profesjonalny - nie czuję się omnibusem, jeśli chodzi o JS, więc wybaczcie.

Gdyby ktoś z Was poświęcił swój czas i poradził coś na te moje problemy ze sliderem, będę wdzięczny.

Pozdrawiam wszystkich czytających tego posta.
trueblue
Input o typie range działa praktycznie na wszystkich przeglądarkach (http://caniuse.com/#search=range). Po co kombinować z polyfill.
https://jsfiddle.net/86wyozn6/

A ostylować możesz korzystając z tych porad: https://css-tricks.com/styling-cross-browse...nge-inputs-css/
swiezak
Dziękuję Ci za poświęcony czas i namiary na rozwiązanie moich bolączek. Biblioteka rangeSlider skusiła mnie chyba ładnym opakowaniem z napisem CSS, ale ma swoje minusy - za dużo kodu JS do ogarnięcia.

Pozdrawiam.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2019 Invision Power Services, Inc.