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

[Glaciu]

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:

https://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

[aras1991]

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.