Jump to content
Sign in to follow this  
Glaciu

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

Recommended Posts

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"> </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 smile.png


Share this post


Link to post
Share on other sites

Na Twoim mijescu użyłbym JQuery UI. Tam jest suwak, który ma dość rozbudowane funkcje i dokumentację, że jak trochę znasz się na JS to sobie poradzisz. Ten suwak ma funkcję, która wywołuje się po zmianie pozycji i w tej funkcji możesz pokazywać wartość suwaka gdzie chcesz. Gdybyś miał problem to napisz na PW.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By salab
      ✔️ Kto: Web Systems
      Gdzie: Łódź
      Zdalnie: możliwe częściowo
       
      ✔️ Będziesz odpowiedzialny/a za:
      - budowę i rozwijanie stron Klientów
      - zarządzanie zapleczem i portalami firmy (domeny, hosting)
       
      ✔️ Powinieneś:
      - znać HTML, CSS, JS, jQuery, podstawy PHP, 
      - mieć doświadczenie z CMS Wordpress, ACF, CPTUI, WPML, WPallexport/import,
      - szybko się uczyć i chcieć rozwijać,
      - sprawnie się komunikować,
       
      ✔️ Mile widziane:
      - Sass, NodeJS, Bootstrap, React...
      - API FB, Google Analytics, Google Search Console, 
      - Znajomość PrestaShop/Magento,
      - Znajomość Photoshop lub Gimp,
      - Doświadczenie przy projektach innych niż instalacja WordPress z płatnym szablonem
       
      ✔️Oferujemy:
      - wynagrodzenie: podstawa (2500 - 3500 zł netto plus premie uznaniowe ),
      - fajną atmosferę i elastyczne godziny pracy,
      - możliwość częściowej pracy zdalnej,
      - pracę w rozwijającej się firmie, gdzie masz wpływ na to co robisz,
      - możliwość rozwijania swoich kompetencji i szlifowania umiejętności,
      nie wymagamy komercyjnego doświadczenia
       
      ✔️Aplikuj:
      https://www.web-systems.pl/praca/staz/
      Pytania najlepiej na: biuro@web-systems.pl
       
       
       
      Ogłoszeniodawca: Web Systems Krzysztof Balicki, 95-020 Janówka, ul. Bursztynowa 4, NIP: 729-246-24-54
    • By DARIANO33
      WITAM WAS!

      Może mi ktoś przybliżyć w jakiej technologii robione są aktualne strony www chodzi mi o nowy trend stron w których wszystko jest kwadratowe, są od razu represywne, niby nic wielkiego ale podczas przewijania na niektórych stronach są nawet fajne efekty. Chodzi mi o to jak wykonane są elementy strony w których po przewinięciu w dół strony przykładowo dzieje się jakaś akcja (licznik zaczyna liczyć, elementy się przesuwają, zdjęcie stoi w miejscu a reszta się przewija itp.. itd..) mam nadzieję że wiecie o jakie strony mi chodzi...

      Co raz większa ilość stron wykonana jest już w takim trendzie.

      Czy jest to połączenie po prostu zwykłego CSSa i HTMLa z elementami JS i JQ? czy może to się jakoś nazywa i jest na to jakiś generator etc..

      Jak wykonać taki szablon czy są gdzieś gotowe moduły do wykonania tego?
       
      Z góry proszę o wyrozumiałość. Jestem początkujący i chcę zrobić sobie stronę na swoje potrzeby w takiej technologii.
      Pozdrawiam,
      Dariusz
    • By DGK Group
      Wykonam kodowanie szablonów .psd do HTML/CSS/JS.
      Po zakodowaniu strony wyświetlają się poprawnie we wszystkich popularnych przeglądarkach a kod zgodny jest z przyjętymi zasadami.
      Czas wykonania już od kilku godzin ! Ceny od 150zł.
      Zapraszam do kontaktu i życzę miłego dnia.
    • By Spacedrive
      Stanowisko: Front-end Web Developer (CSS/HTML5/Javascript)
      Miejsce pracy: Warszawa - Mokotów (2 minuty od stacji metra Wierzbno) - praca stacjonarna, brak możliwości pracy zdalnej
      Zakres obowiązków:
      utrzymanie i rozwój produktu w technologii HTML5/CSS/Javascript
      współpraca z programistami backend
      wkład w zespół poprzez przedstawianie nowych pomysłów lub technologii

      Wymagania:
      bardzo dobra znajomość HTML, CSS
      znajomość technologi AJAX
      znajomość Javascript oraz biblioteki jQuery
      znajomość problemów i różnic w interpretacji standardów przez przeglądarki (IE8+, Firefox, Safari, Chrome, Opera)
      umiejętność kodowania mailingów oraz znajomość zagadnień związanych z obsługa HTML/CSS w programach pocztowych i webmailach
      znajomość aktualnych trendów w budowaniu interfejsów użytkownika aplikacji internetowych
      znajomość pakietu Adobe (na poziomie umożliwiającym cięcie, podstawową obróbkę i optymalizację grafiki)
      kreatywność i zaangażowanie
      umiejętność pracy w zespole
      wysoka motywacja do pracy, komunikatywność
      chęć ciągłego rozwijania swoich umiejętności

      Mile widziane:

      podstawowa znajomość zagadnień SEO
      zagadnienia związane z optymalizacją i wydajnością tworzonego kodu
      wiedza na temat użyteczności i dostępności stron internetowych
      znajomość Twitter Bootstrap
      znajomość systemu kontroli wersji GIT
      znajomość narzędzi typu Closure Compiler
      znajomość SASS/COMPASS

      Oferujemy:

      stabilne atrakcyjne warunki finansowe (płatność zawsze w terminie na początku miesiąca)
      łatwy dojazd do biura (2 minuty od stacji metra Wierzbno)
      elastyczny czas pracy
      pracę w młodym i kreatywnym zespole

      Wyślij CV pod adres:
      praca@keepone.pl
      SpaceDrive Sp. z o.o.
      ul. Woronicza 15/70
      02-625 Warszawa
      NIP: 521-363-30-74
      REGON: 146183680
      KRS 0000425127
      Tel. 884883311
      Zastrzegamy sobie prawo do kontaktu tylko z wybranymi Kandydatami.
      Prosimy o załączenie do aplikacji klauzuli: "Wyrażam zgodę na przetwarzanie moich danych osobowych dla potrzeb niezbędnych do realizacji procesu rekrutacji (zgodnie z Ustawą z dn. 29.08.1997 r. o ochronie danych osobowych, Dz. U. Nr 101, poz. 926 ze zm.)".
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. Terms of Use Privacy Policy