CODEWITHSUNDEEP
javascriptjqueryhtmlcssslider
Moheri
Moheri

Reputation: 7

range slider javascript in hours and minutes

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>

Upvotes: 0

Views: 3907

Answers (4)

CodeSmith
CodeSmith

Reputation: 3197

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

Upvotes: 0

Gibin Ealias
Gibin Ealias

Reputation: 2859

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.

Upvotes: 0

Clyde Lobo
Clyde Lobo

Reputation: 9174

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).

Upvotes: 0

Ayo K
Ayo K

Reputation: 1774

$("#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>

Upvotes: 1

Related Questions