So, I have a input in my template
<input type="range" min="0" max="100" value="0" id="duration_slider" onchange="seek()">
My javascript for seek() and updating the slider is
function seek(){
slider_position = mysong.duration * (mysong.value / 100);
mysong.currentTime = slider_position;
}
function range_slider(){
let position = 0;
if(!isNaN(mysong.duration)){
position = mysong.currentTime * (100 / mysong.duration);
slider.value = position;
}
}
where mysong is the variable i get from my audio input in html.
var mysong = document.getElementById('mysong');
Sorry I don't know much javascript, I needed it while doing my django project. I applied same concept for my volume controls and it worked somehow.
I hope value of your slider_position corresponding to value of slider.value.
So you need to catch that value from slider...
var slider = document.getElementById('duration_slider');
and than define value variable in let slider_position into seek() function
function seek() {
let slider_position = slider.value;
mysong.currentTime = slider_position;
console.log(slider_position); //for displaying value in console
}
<input type="range" id="slider" min="0" max="100" value="0"/>
<script>
var slider = document.getElementById('slider');
const MAX_VALUE = 100;
const MIN_VALUE = 1;
function updateSliderRange(updatedValue){
const currentValue = slider.value;
slider.value = (currentValue >= MIN_VALUE && currentValue <=100)
? updatedValue
: currentValue;
}
</script>
Related
I am using an Input range slider and JS is giving the default value of 0 first and after that it gives the correct value.
So when I go to change the textContent to the value of the range its always a 0. After the first attempt the value is correct.
I have tried event listener to be "change" instead of "click". The result stays the same.
What am I missing?
JS Fiddle https://jsfiddle.net/5g78a4qL/
HTML
'''
Select your age
<input type="range" min="1" max="100" id="myRange" class="rch-slider">'''
JS
'''let slider = document.getElementById("myRange");
let output = 0;
let personAge = 0;
document.querySelector('#myRange').addEventListener('click', function(event){
document.querySelector('#yourAge').textContent = "Your Age: ";
output = document.getElementById("value")
output.innerHTML = slider.value
slider.oninput = function() {
output.innerHTML = this.value;
personAge = Number(this.value);
}
})
document.querySelector('#myRange').addEventListener('click', function(event){
console.log(personAge);
})'''
Try 'change' event listener instead of click...
document.querySelector('#myRange').addEventListener('change', function(event){
document.querySelector('#yourAge').textContent = "Your Age: ";
output = document.getElementById("value")
output.innerHTML = slider.value
slider.oninput = function() {
output.innerHTML = this.value;
personAge = Number(this.value);
}
})
THE RANGE INPUT:
<input type="range" value="1" min="1" max="100" id="myRange" class="rch-slider">
Try this
<div class="rch-age-section margin-sections">
<div class="rch-age"> <span id="yourAge">Select your age</span> <span id="value"></span></div>
<input type="range" min="1" max="100" id="myRange" class="rch-slider">
</div>
<script>
let slider = document.getElementById("myRange");
let output = document.getElementById("value");
let personAge = 0;
document.querySelector('#myRange').addEventListener('click',
function(event){
document.getElementById("yourAge").textContent = "Your Age: ";
output.textContent = slider.value
personAge = Number(slider.value);
console.log(personAge);
})
</script>
I did a Slidebar (0-99) which is working well.
I want to add 2 buttons to manually change it (first button -1 ; second button +1).
It was working well with my "-1" code for the first button, but the second one isnt working and I dont understand why. (It add 1 but for example if my slidebar is at 50, when i click its not going to 51 but 501).
Here is my code :
<div>
<button id="moins1" onclick="moins1()">MOINS 1</button>
<span class="unselectable rangeValue1" id="rangeValue1">RR</span>
<Input class="range" type="range" name="BarreRR" value="0" min="0" max="99" onChange="rangeSlide1(this.value)" onmousemove="rangeSlide1(this.value)"></Input>
<button id="plus1" onclick="plus1()">PLUS 1</button>
</div>
<script type="text/javascript">
function rangeSlide1(value) {
document.getElementById('rangeValue1').innerHTML = value;
}
function moins1(){
var Yop = document.getElementById('rangeValue1').textContent;
Yop -=1;
document.getElementById('rangeValue1').innerHTML = Yop;
console.log(Yop);
}
function plus1(){
var Yop = document.getElementById('rangeValue1').textContent;
Yop +=1;
document.getElementById('rangeValue1').innerHTML = Yop;
console.log(Yop);
}
</script>
Thanks for help, Zartex.
The issue is that textContent returns string and using + operator will try to concatenate the values. So you can parse it. But I would recommend directly connecting your range with displayed value and only alter the range using the buttons or change them together for example:
function rangeSlide1(value) {
document.getElementById('rangeValue1').innerHTML = value;
}
function moins1() {
let range = document.querySelector('.range')
if (range.value != 0) {
let newValue = range.value - 1
document.getElementById('rangeValue1').innerHTML = newValue
range.value = newValue
}
}
function plus1() {
let range = document.querySelector('.range')
if (range.value < 99) {
let newValue = Number(range.value) + 1
document.getElementById('rangeValue1').innerHTML = newValue
range.value = newValue
}
}
<div>
<button id="moins1" onclick="moins1()">MOINS 1</button>
<span class="unselectable rangeValue1" id="rangeValue1">RR</span>
<Input class="range" type="range" name="BarreRR" value="0" min="0" max="99" onChange="rangeSlide1(this.value)" onmousemove="rangeSlide1(this.value)"></Input>
<button id="plus1" onclick="plus1()">PLUS 1</button>
</div>
Considering your range is limited from 0 to 100 I added condition not to go under 0
it will help you,
Yop value always in "50" + 1 it will return by concat 501
so parseInt your string and add/minus by 1
function moins1(){
var Yop = document.getElementById('rangeValue1').textContent;
Yop = parseInt(Yop)-1;
document.getElementById('rangeValue1').innerHTML = Yop;
console.log(Yop);
}
function plus1(){
var Yop = document.getElementById('rangeValue1').textContent;
Yop = parseInt(Yop)+1;
document.getElementById('rangeValue1').innerHTML = Yop;
console.log(Yop);
}
I am running into a problem in my application where I am trying to use an range slider to determine the position of a link containing an image. Basically it grabs the value of the ranges and uses it to determine the position. However, that does not happen. Instead it does absolutely nothing. Any thoughts on why this might occur?
JS Code:
//Social Media
var rangeX = document.getElementById("rangeX");
var rangeY = document.getElementById("rangeY");
var socialChooser = document.getElementById("socialsChooser");
var inputInvite = document.getElementById("inputInvite");
var submitsocialMedia = document.getElementById("submitSocial");
var Discord = document.getElementById("discord");
var YouTube = document.getElementById("youtube");
submitsocialMedia.addEventListener("click", function () {
var socialContainer = document.getElementById("socialsContainer");
if ( socialChooser.value === "discord") {
const a = document.getElementById("discordJoin");
if (a.children.length === 0) {
const linkText = document.createElement("img");
linkText.id = "linkText";
console.log(linkText.id);
linkText.src = "/html/imgs/Discord-Logo-White.png";
a.style.marginLeft = rangeX.value + "px";
a.style.marginTop = rangeY.value + "px";
a.appendChild(linkText);
a.title = "Discord Invite Link";
a.href = `${inputInvite.value}`;
}
}
HTML Code:
<input type="range" min="1" max="1000" value="500" id="rangeX"> X
<input type="range" min="1" max="1000" value="500" id="rangeY"> Y
It's hard to test your code. So many elements referenced but not available. Instead, here's a mockup of a working range slider/element added to DOM combo. Maybe it will help you discover what's not working in your setup.
let div = document.querySelector('div');
let rangeX = document.getElementById("rangeX");
let rangeY = document.getElementById("rangeY");
document.querySelector('button').addEventListener('click', () => {
div.innerHTML += `<a href='#' style='margin-left:${rangeX.value}px; margin-top:${rangeY.value}px;'>The link</a>`;
});
div a {
display: block
}
<input type="range" min="1" max="500" value="10" id="rangeX"> X
<input type="range" min="1" max="500" value="10" id="rangeY"> Y
<button>create</button>
<div>
</div>
I have an HTML element input of type range:
<body onload="rotar()">
<img src="#" id="locator" />
<input type="range" name="points" id="loop" min="1" max="20" data-show-value="true">
</body>
It goes basically like this: This page shows images that change dynamically and I want the slider with ID loop to change its value, just like the images so it moves according to them.
function rotar(){
var slider = document.getElementById("loop");
var locator = document.getElementById('locator'),
dir = 'static/visor/img/',
delayInSeconds = 3,
num = 1,
len = 20;
setInterval(function(){
locator.src = dir + num+'.png';
if (num === len){
num = 1;
}
else{
num++;
}
slider.value = num;
}, delayInSeconds * 50);}
I don't have any image dir so i just did it with an simple input. please check this http://jsfiddle.net/maxofpower/tAs6V/275/
<body onload="rotar()">
<form ><div>
<input id="loop" onchange="amount.value=rangeInput.value" oninput="amount.value=rangeInput.value" type="range" min="0" max="200" name="rangeInput" />
<input id="box" type="text" value="0" name="amount" for="rangeInput" oninput="rangeInput.value=amount.value" />
</div></form>
</body>
<script>
function rotar() {
var slider = document.getElementById("loop");
var num = 1;
setInterval(function(){
slider.value = num++;
}, 500);
};
</script>
Your issue is with the delay passed to the setInterval method, as the delay argument is in milliseconds, to get 2.8 seconds you'd have to multiply the delayInSeconds variable by 1000.
You had some mistakes in your code, you refreferenced the img#locator element with the variable name rotator the you used the variable name locator, which will cause an Undefined variable error. Im my answer I changed the variable's name from rotator to locator, also I made the delay to 2.8 seconds.
Here's a demo:
function rotar() {
var slider = document.getElementById("loop"),
locator = document.getElementById('locator'),
dir = 'static/visor/img/',
delayInSeconds = 2.8,
num = 1,
len = 20;
setInterval(function() {
locator.src = dir + num + '.png';
num = (num === len) ? 1:num + 1;
slider.value = num;
}, delayInSeconds * 1000);
}
<body onload="rotar()">
<img src="#" id="locator" />
<input type="range" name="points" id="loop" min="1" max="20" data-show-value="true">
</body>
Hi I'm new to javascript and I would like you to help me figure out why I can't get the result of the random number generator to appear in the span tag after the user clicks a calculate button using the min and max number they entered. I believe there is nothing wrong with the random number function it's just when I want to use the random number function as an event handler for the onclick event for the button it doesn't work. well, what I did was, I made a function called answer to gather the users input and to use that input as a parameter for the the random number function that is being called inside the answer function.
Then I used the answer function as an event handler for the onclick thinking that it would have the result of the the random number generator and would apply that to the onclick. and I stored that in var called storage so I could place the result of the event in the span tag later.
Here is the js fiddle of the code. can you help me solve my problem by getting the result of the random_number function in to the span $("output") after the button $("calculate") click?
only pure javascript, no jquery please.
Thank you in advance for your help. and I'm sorry if I got terminology wrong and for bad spelling. http://jsfiddle.net/jack2ky/WDyMd/
<label for="min">Enter the min:</label>
<input type="text" id = "min" /> <br />
<label for="max">Enter the max:</label>
<input type="text" id = "max" /> <br />
<input type="button" id = "calculate" value = "calculate"/>
<span id ="output"> </span>
<script>
var $ = function(id){
return document.getElementById(id);
}
window.onload = function () {
var random_number = function(min, max, digits){
digits = isNaN(digits) ? 0 : parseInt(digits);
if(digits < 0){
digits = 0;
}else if (digits > 16){
digits = 16
}
if(digits == 0){
return Math.floor(Math.random() * (max - min +1)) +min;
}else {
var rand = Math.random() * (max - min) + min;
return parseFloat(rand.toFixed(digits));
}
}
var storage = $("calculate").onclick = answer;
var answer = function(){
var miny = $("min").value;
var maxy = $("max").value;
return random_number(miny, maxy);
}
$("output").firstChild.nodeValue = storage;
}
</script>
</body>
</html>
var storage = $("calculate").onclick = answer;
...
$("output").firstChild.nodeValue = storage;
These two statements are called on page load. What is happening is you are changing the value of variable storage but the statement var storage = $("calculate").onclick = answer;
is being called only once when the page loads. You need to update the answer when user clicks the button. So you can remove $("output").firstChild.nodeValue = storage; and update the answer function like:
var answer = function(){
var miny = parseInt( $("min").value );
var maxy = parseInt( $("max").value );
var ans = random_number(miny, maxy);
$("output").innerHTML = ans;
}
This should do it:
<!DOCTYPE html>
<html>
<head>
<script>
var $ = function(id){
return document.getElementById(id);
}
window.onload = function () {
var random_number = function(min, max, digits){
digits = isNaN(digits) ? 0 : parseInt(digits);
if(digits < 0){
digits = 0;
}else if (digits > 16){
digits = 16
}
if(digits == 0){
return Math.floor(Math.random() * (max - min +1)) +min;
}else {
var rand = Math.random() * (max - min) + min;
return parseFloat(rand.toFixed(digits));
}
}
$("calculate").onclick = function() {
var miny = $("min").value;
var maxy = $("max").value;
$("output").firstChild.nodeValue = random_number(miny, maxy);
}
}
</script>
</head>
<body>
<label for="min">Enter the min:</label>
<input type="text" id = "min" /> <br />
<label for="max">Enter the max:</label>
<input type="text" id = "max" /> <br />
<input type="button" id = "calculate" value = "calculate"/>
<span id ="output"> </span>
</body>
</html>
$("output").firstChild.nodeValue = storage;
This line seems to be the problem because your output-Element has no firstChild. So the value gets written nowhere.
Just use
> $("output").nodeValue = storage;
edit: Tested this in jsFiddle - this is not the solutions as mentioned below!
If You are able to get your value in the variable storage
then you can simply render this value in span as HTML
$("#output span").html = storage;