0

I'm trying to display the value of a slider in hours and minutes separately. I'm quite new to JS and still trying to wrap my head around how it works.

What I have so far is a working slider that has a max value of 1440 (minutes in 24 hours). In JS I'm trying to divide that into hours and minutes and put these values into the specific HTML ID Tags using innerHtml. Unfortunately, the values are not displayed at all, H3 and the specific IDs remain empty.

I also need a way to update the output when the slider is dragged. Could you have a look at it and give me a hint in the right direction?

EDIT: I added an If-Statement to format the minutes when their value is one digit only.

var slider = document.getElementById("myRange");
var hours = Math.floor(slider.value / 60);
var minutes = slider.value % 60;
var minuteOutput = $("#minutes");
var hourOutput = $("#hours");
var formattedMinutes = ("0"+minutes);
hourOutput.innerHTML = hours;
minuteOutput.innerHTML = minutes;
if(minutes < 10){
minuteOutput.innerHTML = formattedMinutes;}
else {minuteOutput.innerHTML = minutes;}
.slider {
    -webkit-appearance: none;
    appearance: none;
    width: 20em;
    height: 1em;
    background: #2C4461;
    outline: none;
    margin-top: 2em;
    border-radius: 1em;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 50%;
    width: 1.5em;
    height: 1.5em;
    background: #BAC5D2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slidecontainer">
  <h3>
   <span id="hours"></span>
   <span id="minutes"></span>
  </h3>
  <input type="range" min="1" max="1440" value="300"      class="slider" id="myRange">
</div>
Moheri
  • 7
  • 1
  • 3

4 Answers4

1
$("#minutes")

will return an array. So you have to access it like one:

$("#minutes")[0]

which will return the first element. See this explanation for more

Then add an onchange event to your slider to enable live updates.

function updateSlider(){
    var slider = document.getElementById("myRange");
    var hours = Math.floor(slider.value / 60);
    var minutes = slider.value % 60;
    var minuteOutput = $("#minutes")[0];
    var hourOutput = $("#hours")[0];
    hourOutput.innerHTML = hours;
    minuteOutput.innerHTML = minutes;
}

updateSlider();
.slider {
    -webkit-appearance: none;
    appearance: none;
    width: 20em;
    height: 1em;
    background: #2C4461;
    outline: none;
    margin-top: 2em;
    border-radius: 1em;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 50%;
    width: 1.5em;
    height: 1.5em;
    background: #BAC5D2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slidecontainer">
  <h3>
   <span id="hours"></span>
   <span id="minutes"></span>
  </h3>
  <input type="range" min="1" max="1440" value="300"      class="slider" id="myRange" onchange="updateSlider()">
</div>
Ayo K
  • 1,719
  • 2
  • 22
  • 34
0

Replace with below

var minuteOutput = $("#minutes")[0];
var hourOutput = $("#hours")[0];

$("#minutes") will return the array where the first item is the element.

Threfore, $("#minutes")[0] will return the element in which you can change the inner HTML.

Gibin Ealias
  • 2,751
  • 5
  • 21
  • 39
  • Could you elaborate why this will solve my problem? What could be a way to update the output when the slider is dragged? – Moheri Jan 31 '18 at 11:43
0

You are mixing jquery with js

var hourOutput = $("#hours"); // Returns a jquery object

The problem lies in this line hourOutput.innerHTML = hours;

you either do hourOutput.get(0) which will return the DOM element so you can do a hourOutput.get(0).innerHTML = hours or just use the jquery function html like hourOutput.html(hours).

Clyde Lobo
  • 9,126
  • 7
  • 34
  • 61
0

You are missing a couple of things:

  • displayValue is not in the HTML but it's not the main cause of problems.

  • You don't target actual elements in your jQ selections, you only have array results (known also as "mixing JS with jQ" ), select the first element in that array (should be only one if you targeted right) then work with it.

  • You have no event handling for the changes in slider position. Basically, your code executes one and calculates hours and minutes once, but NEVER recalculates when the slider moves

Here is one way of fixing it:

HTML:

<div class="slidecontainer">
  <h3 id="displayValue">
   <span id="hours">min</span>
   <span id="minutes">hour</span>
  </h3>
  <input type="range" min="1" max="1440" value="500" class="slider" id="myRange">
</div>

JS:

var slider = document.getElementById("myRange");
var output = document.getElementById("displayValue");
var hours = Math.floor(slider.value / 60);
var minutes = slider.value % 60;
var minuteOutput = $("#minutes")[0];
var hourOutput = $("#hours")[0];
var hours = Math.floor(slider.value / 60);
var minutes = slider.value % 60;
hourOutput.innerHTML = hours;
minuteOutput.innerHTML = minutes

$('.slider').change(function() {
                var hours = Math.floor(slider.value / 60);
        var minutes = slider.value % 60;
        hourOutput.innerHTML = hours;
        minuteOutput.innerHTML = minutes
});

CSS can stay the same :)

Here is a demo: fiddle

DanteTheSmith
  • 2,937
  • 1
  • 16
  • 31
  • Sweet, thanks! I used .oninput though, which will update the value while the handle is dragged. – Moheri Jan 31 '18 at 12:16
  • @Moheri how/where did you add `.oninput`? I'd love to use that, makes more sense to have values changing while dragging, thanks. – Markus Nov 07 '22 at 10:41
  • @DanteTheSmith might you know how to use .oninput or how to make it update the values while dragging the slider? – Markus Nov 09 '22 at 22:24
  • Managed to change it by adding `oninput="myslider(this.value)` into the input element HTML and wrapping all js into `function myslider(value) {` and instead of `slider.value` use `value` variable that gets continuously updated with slider changes. Not sure if this is how @Moheri did it but it works. – Markus Nov 10 '22 at 08:26