Clicky

Skocz do zawartości


Zdjęcie
- - - - -

[JS] Input range z wyświetlanym tekstem w zależności od wartości

12 odpowiedzi w tym temacie
input range js

  • Zaloguj się, aby dodać odpowiedź

#1 Glaciu

Glaciu

    Początkujący

  • Użytkownik
  • Pip
  • 15 postów

Napisano 14 sierpień 2014 - 13:05

Witajcie,

 

chciałbym na swojej stronie zrobić suwak, który w zależności od wartości wyświetla konkretne komunikaty. Przykład takiego tworu można znaleźć na stronie:

http://www.solarcity.com/

Aktualnie mam sam range slider, który wyświetla dwie wartości wartości, a chciałbym, żeby wyświetlały się również treści przypisane konkretnym przedziałom. Mój kod:

<script>

onload = function() {
       var $ = function(id) { return document.getElementById(id); };
       $('one').oninput = function() { $('month').innerHTML = this.value-0; $('year').innerHTML = this.value*12;};
       $('one').oninput();
};

</script>

<div class="energy-usage">
<div class="col-md-6 "id="month-inner">
       Miesięcznie
       <div id="month"></div>
</div>
<div class="col-md-6" id="year-inner">
       Rocznie
       <div id="year">&nbsp;</div>
</div>
<div class="clear"></div> 
<div id="suwak"><input class="range-bar" type="range" id="one" min="0" max="3000" value="0"/></div>

Nie mam zupełnie pomysłu(umiejętności) jak to ugryźć. Z góry dziękuję za pomoc :)



#2 dczepierga

dczepierga

    Początkujący

  • Użytkownik
  • Pip
  • 27 postów
  • Skąd:Katowice

Napisano 14 sierpień 2014 - 20:17

Tak naprawdę możesz to zrobić na 101 sposób albo trochę więcej :)

 

Jedno z najprostszych rozwiązań:

<script>
var rangesText = {
   10: 'tekst dla 10',
   20: 'tekst dla 20',
   30: 'tekst dla 30'
};
onload = function() {
       var $ = function(id) { return document.getElementById(id); };
       $('one').oninput = function() { 
          var fieldValue = parseInt(this.value, 10);
          $('month').innerHTML = fieldValue; 
          $('year').innerHTML = fieldValue*12;
          $('tekst').innerHTML = rangesText[fieldValue] || '';
       };
       $('one').oninput();
};

</script>

<div class="energy-usage">
<div class="col-md-6 "id="month-inner">
       Miesięcznie
       <div id="month"></div>
</div>
<div class="col-md-6" id="year-inner">
       Rocznie
       <div id="year">&nbsp;</div>
</div>
<div id="tekst"></div>
<div class="clear"></div> 
<div id="suwak"><input class="range-bar" type="range" id="one" min="0" max="3000" value="0"/></div>

Ewentualnie możesz sobie w takim elemencie od id "tekst" zrobić jakieś komunikaty dla danego range które są wszystkie na starcie ukryte (display: none), do tego robisz sobie klasę w CSS np. "active" która zmienia "display" na "block" i wówczas przy każdej zmianie chowasz aktualnie aktywny element i dodajesz klasę "active" do komunikatu dla tego range który sobie bierzesz np. po jakiejś klasie/id z nawą typu "range-10", "range-20" itd..

W ten sposób uzyskasz efekt zmiany tekstu na taki jaki chcesz przy danym range :)

 

Ja osobiście wolałbym drugi sposób, ale to już twój wybór... widzę że zabrałeś się za czystego JS-a, a pewnie dużo łatwiej by ci było z jQuery gdzie mógłbyś zrobić zawsze jakieś animacje przy zmianie :)

 

W razie czego pytaj :)



#3 Glaciu

Glaciu

    Początkujący

  • Użytkownik
  • Pip
  • 15 postów

Napisano 16 sierpień 2014 - 11:33

Dzięki za odpowiedź, będę testował i zobaczę jak mi pójdzie :)



#4 Glaciu

Glaciu

    Początkujący

  • Użytkownik
  • Pip
  • 15 postów

Napisano 18 sierpień 2014 - 09:55

Ekstra, jesteś wielki. Mam jeszcze jeden problem, ponieważ trochę nie doprecyzowałem. Ten prawie idealny skrypcik pokazuje treść dla konkretnych wartości, a j chciałbym, żeby robił to dla przedziałów :) Co muszę zmodyfikować?



#5 dczepierga

dczepierga

    Początkujący

  • Użytkownik
  • Pip
  • 27 postów
  • Skąd:Katowice

Napisano 18 sierpień 2014 - 11:01

<script>
var rangesText = [
   {text: 'tekst dla 0-10', from: 0, to: 10},
   {text: 'tekst dla 11-20', from: 11, to: 20},
   {text: 'tekst dla 21-30', from: 21, to: 30}
];
var rangesTextLength = rangesText.length;
onload = function() {
       var $ = function(id) { return document.getElementById(id); };
       $('one').oninput = function() { 
          var fieldValue = parseInt(this.value, 10);
          $('month').innerHTML = fieldValue; 
          $('year').innerHTML = fieldValue*12;
          $('tekst').innerHTML = '';
          for (var i=0; i<rangesTextLength; i++) {
            if (fieldValue >= rangesText[i].from && fieldValue <= rangesText[i].to) {
              $('tekst').innerHTML = rangesText[i].text || '';
              break;
            }
          }
          
       };
       $('one').oninput();
};

</script>

<div class="energy-usage">
<div class="col-md-6 "id="month-inner">
       Miesięcznie
       <div id="month"></div>
</div>
<div class="col-md-6" id="year-inner">
       Rocznie
       <div id="year">&nbsp;</div>
</div>
<div id="tekst"></div>
<div class="clear"></div> 
<div id="suwak"><input class="range-bar" type="range" id="one" min="0" max="3000" value="0"/></div>

Tak na szybko pisane z palca ;)

Łapie przedziały zamknięte od-do i wychodzi po pierwszym trafieniu ;)


  • Glaciu lubi to

#6 Glaciu

Glaciu

    Początkujący

  • Użytkownik
  • Pip
  • 15 postów

Napisano 18 sierpień 2014 - 11:47

Dzięki wielkie!



#7 Glaciu

Glaciu

    Początkujący

  • Użytkownik
  • Pip
  • 15 postów

Napisano 19 sierpień 2014 - 10:52

A jeszcze taka sprawa, jak już męczę(przepraszam :)) jest możliwość, żeby jakoś nadać klasy tym przedziałom tak, aby zmieniały się kolory(napisów i suwaczka) w danym przedziale?



#8 dczepierga

dczepierga

    Początkujący

  • Użytkownik
  • Pip
  • 27 postów
  • Skąd:Katowice

Napisano 20 sierpień 2014 - 15:22

No to w tym wypadku musiałbyś w zmiennej `textRanges` dodać sobie dla każdego elementu kolejną wartość pod nazwą np. "className" i później dodawać sobie tą klasę do elementu tekstu / suwaka żeby zmienił się wygląd...

Oczywiście w CSS musisz mieć zdefiniowane wszystkie te klasy ze stylami :)



#9 Glaciu

Glaciu

    Początkujący

  • Użytkownik
  • Pip
  • 15 postów

Napisano 22 sierpień 2014 - 12:49

Dzięki, będę testować :)



#10 Glaciu

Glaciu

    Początkujący

  • Użytkownik
  • Pip
  • 15 postów

Napisano 04 wrzesień 2014 - 10:49

Chciałbym podpiąć ten range slider do formularza mailowego, tak, żeby wybraną wartość dołączał do wiadomości, która przychodzi na maila. Da się to jakoś zrobić?



#11 dczepierga

dczepierga

    Początkujący

  • Użytkownik
  • Pip
  • 27 postów
  • Skąd:Katowice

Napisano 04 wrzesień 2014 - 21:44

To zależy jak to tak naprawdę robisz... Jeżeli używasz do wysłania maila tak naprawdę okna z poczty otwieranego u użytkownika (mailto) to poczytaj o tym:
http://www.angelfire...ster/mailto.htm

 

Jeżeli wysyłasz maila np. z poziomu PHP (lub czeogoś innego) to po prostu odbierasz dane z formularza (po submicie) i generujesz odpowiednią treść maila :)

 

Wszystko zależy od tego jak to robisz/chcesz zrobić :)


  • Glaciu lubi to

#12 Glaciu

Glaciu

    Początkujący

  • Użytkownik
  • Pip
  • 15 postów

Napisano 25 wrzesień 2014 - 09:52

Z załączeniem poradziłem sobie metodą prób i błędów ;) ale doszedł jeden mały bug, mianowicie na IE 11 pasek range slidera wyświetla zera, których wartość nie zmienia się przy przesuwaniu suwaka. W skrócie niezależnie od położenia pokazuje "0" i "0" :) czy trzeba dopisać specjalny fragment kodu, żeby wszystko działało pod IE?



#13 dczepierga

dczepierga

    Początkujący

  • Użytkownik
  • Pip
  • 27 postów
  • Skąd:Katowice

Napisano 25 wrzesień 2014 - 11:31

Pewnie jest problem ze zdarzeniem "oninput" w IE którego używasz... więc spróbuj może użyć zdarzenia "onchange" lub innego... poza tym bez żywego przykładu ci nie pomogę, więc musiałbyś albo dać link do tego lub wrzucić jakiś działający draft na jsfiddle...







Również z jednym lub większą ilością słów kluczowych: input range, js

Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych