Tip: for the background, you should use 'input' instead of `mousemove' since 'input' event is what fires off when the user interacts with the slider. 👍
I'm trying to make a simple range slider where when you drag it, it shows how much said thing is, then it adds each sliders total at the bottom of the screen. How can I achieve this?
Amazing ! That was what I need..Thank you! By the way, you could use `` and ${x} to concatenate the string at the end of the video. It will look like this: var color =`linear-gradient(90deg, rgb(117,252,117) ${x}%, rgb(214,214,214) ${x}%)`;
and if you have a value max > 100 replace 'var x' by: var x = ((slider.value - slider.min) / (slider.max - slider.min) * 100 ); because it's easier when you have a range form 0 to 100 because the slider value is already in pourcent but when you have a range with differents values it's doesn't work
Hey there, nice tutorial. I would suggest updating everything oninput (not onmousemove) though. Otherwise it only updates if you move the mouse and not if you change the input by clicking somewhere or with the arrow keys on the keyboard (when the input is focused).
Hey thanks for your comment! Yeah you are right, but then you will first see the output after stop with the input. In other words, you will not see the input between start and stop value as ouput text :(!
@@BananaCoding Hey, do you mean it doesn't update while being dragged with the mouse? If so, that doesn't seem to be the case for me. I get that effect when using onchange, but doing everything in the function that gets called oninput works fine for me (at least on Firefox, Chrome and Opera).
I'm trying to make a simple range slider where when you drag it, it shows how much said thing is, then it adds each sliders total at the bottom of the screen. How can I achieve this?
Чувак, как у нас говорят: "ничего не понятно, но очень интересно" ))) Я и вправду мало понял, что ты говоришь, но понял, что ты кодил - спасибо тебе, бро!!! Для чего ты при написании border-radius произносишь "border minus radius"? )))
Hi i am a beginner in JavaScript. Please i dont understand how you used output= document.getElementById('value'); and it goes on. I expected output = document.getElementById('slider').value; Sorry if my english isn't correct i'am a francophone. Thanks
If you are not using 1 - 100 and need to convert the values to percentages, this worked for me (not sure if this is the best way to do this). Also changed 'mousemove' to 'change' as Pierre jf pointed out: var maxValue = 15; var slider = document.getElementById('myRange'); var output = document.getElementById('value'); slider.addEventListener('change', function(){ var x = (slider.value / maxValue) * 100; var slidercolor = 'linear-gradient(90deg, #655AA7 ' + x + '%, white ' + x + '%)'; slider.style.background = slidercolor; })
couldn't you just put everything into th slider.oninput function? it just seems odd that you would have two functions that do basically the same thing (ie: you could put the background color changing code into the slider.oninput function as well and it would be more performant)
I have 2 input range in my form, when I open the page, the "value" of the first input shows correctly (10 in my case), but in the second input appears "undefined". This just happen at the first moment, because when I move the range the value changes correctly. How can I fix it? Thank for your tutorial.
Nice Video, Only 1 Question. Can You Change The Dot To A Picture? If You Can, How? Edit: And Can You Upload The Files You Made To Mega Or Mediafire Or Something?
Nice thank you! Yes you can put a picture as a background. Just put the following lines to your CSS: .slider::-webkit-slider-thumb { background-image: url(''yourlink.png"); background-size: contain; } You can find the code here: codepen.io/BananaCoding/pen/LKLdNJ
Hey thanks for this video. But I have a question if I want to show this green color on the page load right now you are showing on mouse move event . So how can i show that range selection color on page load. Please help me
this is only working for max='100', but what if I need max='1000000'? var x = slider.value, but if we have max='1000000' we instantly have a 100+% background, how we can fix that?
Thanks for your comment! You can take the maximum value, and calculate this value to 100%. So, if you have 10.000 as maximum, you can say that 10.000 is 100%. Simple math with CSS value = Maximum value / 100. If the value is now 5.300 for example, it will be 53% (5300 / 100). Just divide with the correct value before setting the css.
I am getting error of " sliderVal.addEventListener is not a function at app.js:3 " I just want to change the bg color of the slider. The code : var sliderVal = document.querySelectorAll("#myRange"); var output = sliderVal.value; sliderVal.addEventListener('change', function() { var x = sliderVal.value; var color = 'linear-gradient(90deg, #515E63' + x + '%, #f6f6f6' + x + '%)'; sliderVal.style.background = color; });
can i use getelementsbyname or byclassname to display a value in 2 place ? i search on yt and everyone just displays a value slider in 1 place, I want to display the value one on slider and other in other place, tks?
Thats fast to do! You can change the attributs in the input tag to: . After that, you have to multiply the shown value with -1 to make it positive again.
I seemingly have an issue that's way out of my debugging skills, the console keeps throwing this error: Uncaught TypeError: Cannot read property 'value' of null apparently it considers the slider as undefined even tho its declaration statement is the first line of code in the script. It would be great if someone could offer help, otherwise great vid, I subbed
Thanks for your nice comment :). For that, I need more context. But this looks just like he can‘t get the value, because you pick the slider the wrong way with javascript . You can copy the code from my CodePen, so you can see the difference. Maybe it helps you! codepen.io/BananaCoding/pen/LKLdNJ
@@BananaCoding thanks for the reply, I literally copied your JavaScript code but the issue persists, at this point I'm beginning to think something is wrong with my browser.
Hello mate had the same problem, i tried starting over and found out something was done wrong with the .slider::after and .slider::before, if this styles don't show any numbers, the value will become null in the js it semes. hope this could help you :)
i need to have a tool tip on my slider as well, so i figure i can probably position the tool tip the same way you positioned the background in the slider
Another way: The „input“ or „change“ event has an event variable. You can access the mouse X and Y off that event attribute, and put those values to an container with position „absolute“
@@BananaCoding i ended up using the tooltip components offset with a nice constant to keep it where it was supposed to be, input and mousemove events didn't have this mouse x and Y that i could see, but i did see scrollWidth and offset width which both looked handy.
Thank you!! I think you need to add a second event listener, touchmove. Mousemove does only work on desktop view. Maybe „input“ as event listener works also!
@@BananaCoding I'll try with input because after writing this last night I realized the touchmove event thing but it didn't work. Let you know! Thanks!
great video! i have a problem though with keeping the value as i reload the page, its for a school project and i cant seem to find any solution to it:(
@@BananaCoding I want something which is completely dynamic because I have different input and there values are also different. Suppose I have a salary range slider also which is 3000 to 20,000 so I want some logic which will work in the all cases.
Hey, thanks for your comment! What do you mean with slider and value in the same line? The idea in my video is: An input with type "range" has a value, you can take this value with JavaScript or jQuery, and put that value with JavaScript on the correct position like in 11:10! Greetz
@@BananaCoding Sorry for the confusion. Your video is perfect. I just had a question if I put the value in front of the slider, whenever the value reaches single or triple digit the slider changes it's position by that one digit. I hope you get my question.
Just assign the value at 09:50 to another text element next to the whole slider. You can put it in one row, if you set the parent container of the whole slider and the text element to „display: flex;“ and „flex-direction: row;“ for example (in CSS).
Thanks for the question! In the back-end, you should edit your main.js with a function, that creates this slider bar. After that, you need a plugin, that can create shortcuts for WordPress. So you can add a shortcut for that function in the main.js. Hope you know what I mean!
Tip: for the background, you should use 'input' instead of `mousemove' since 'input' event is what fires off when the user interacts with the slider. 👍
Thanks for your comment! Nice to hear that! Of course you are right, ‚input‘ is much better to use here!
I'm trying to make a simple range slider where when you drag it, it shows how much said thing is, then it adds each sliders total at the bottom of the screen. How can I achieve this?
I'm doing an online bootcamp and this video helped me a lot to solve an exercise. Thanks.
I love how in depth this was, coming from a junior software engineer.
Amazing ! That was what I need..Thank you!
By the way, you could use `` and ${x} to concatenate the string at the end of the video. It will look like this:
var color =`linear-gradient(90deg, rgb(117,252,117) ${x}%, rgb(214,214,214) ${x}%)`;
with jquery ?
This guy deserves more subscribers
Thank you very much! So glad to hear that :)!
and if you have a value max > 100 replace 'var x' by: var x = ((slider.value - slider.min) / (slider.max - slider.min) * 100 ); because it's easier when you have a range form 0 to 100 because the slider value is already in pourcent but when you have a range with differents values it's doesn't work
You are a hero!! :D You helped me a lot
You are deep of man !
You're awesome! Thank you very much
Thanks for tutorial, you saved my life. Good job
Hey there, nice tutorial. I would suggest updating everything oninput (not onmousemove) though. Otherwise it only updates if you move the mouse and not if you change the input by clicking somewhere or with the arrow keys on the keyboard (when the input is focused).
Hey thanks for your comment! Yeah you are right, but then you will first see the output after stop with the input. In other words, you will not see the input between start and stop value as ouput text :(!
@@BananaCoding Hey, do you mean it doesn't update while being dragged with the mouse? If so, that doesn't seem to be the case for me. I get that effect when using onchange, but doing everything in the function that gets called oninput works fine for me (at least on Firefox, Chrome and Opera).
Yep that‘s what I mean, but it seems I‘m wrong, so thanks for that note :)!
Thanks !
It's very simple and helpful
Thanks!!
I'm trying to make a simple range slider where when you drag it, it shows how much said thing is, then it adds each sliders total at the bottom of the screen. How can I achieve this?
An elegant solution!
Thank you!
Thanks, man! Helped me a lot! Thumbed up!
Thanks mate!
This was soo helpful, you saved my life :) thanks a lot
Чувак, как у нас говорят: "ничего не понятно, но очень интересно" )))
Я и вправду мало понял, что ты говоришь, но понял, что ты кодил - спасибо тебе, бро!!!
Для чего ты при написании border-radius произносишь "border minus radius"? )))
thanks mate!
Very Helpful. Thank you!
Thanks Man!!!!! You save my life......
Hi i am a beginner in JavaScript. Please i dont understand how you used output= document.getElementById('value'); and it goes on.
I expected output = document.getElementById('slider').value;
Sorry if my english isn't correct i'am a francophone. Thanks
been wondering why my input range doesn't cooperate with my text, and this video solved it
If I had 100 likes, I would give you all! Thank you bro!
Good stuff. I see that you're still making videos, so I sub'd. Keep it up. 👍
It was very useful. Thank you!!!
Thank you!
If you are not using 1 - 100 and need to convert the values to percentages, this worked for me (not sure if this is the best way to do this). Also changed 'mousemove' to 'change' as
Pierre jf pointed out:
var maxValue = 15;
var slider = document.getElementById('myRange');
var output = document.getElementById('value');
slider.addEventListener('change', function(){
var x = (slider.value / maxValue) * 100;
var slidercolor = 'linear-gradient(90deg, #655AA7 ' + x + '%, white ' + x + '%)';
slider.style.background = slidercolor;
})
couldn't you just put everything into th slider.oninput function?
it just seems odd that you would have two functions that do basically the same thing (ie: you could put the background color changing code into the slider.oninput function as well and it would be more performant)
Very good, thank you! Is it possible that instead of number value we "attach" separate images?
Amazing. Thanks bro!
and use the "change" event listener because mousemove doesn't work with phone device
It was very helpful. Thanks
Thanks! Glad to hear that.
I have 2 input range in my form, when I open the page, the "value" of the first input shows correctly (10 in my case), but in the second input appears "undefined". This just happen at the first moment, because when I move the range the value changes correctly. How can I fix it?
Thank for your tutorial.
I wish I could like this video 1000x thanks
Thank you! :)
it`s perfect, thank you very much
спасибо :)
I'm so grateful man :)
Nice Video, Only 1 Question. Can You Change The Dot To A Picture? If You Can, How?
Edit: And Can You Upload The Files You Made To Mega Or Mediafire Or Something?
Nice thank you! Yes you can put a picture as a background. Just put the following lines to your CSS:
.slider::-webkit-slider-thumb {
background-image: url(''yourlink.png");
background-size: contain;
}
You can find the code here: codepen.io/BananaCoding/pen/LKLdNJ
Hey thanks for this video.
But I have a question if I want to show this green color on the page load right now you are showing on mouse move event . So how can i show that range selection color on page load.
Please help me
try calling the function at the start of the page
Why its chaging the background color and not the slider color?
Thank you for your Nice video, its really helped me alot
Thanks man! :)
Thank you for your comment :)!
1000000/100
Soo helpful
Sliders are great to adjust Walew
this is only working for max='100', but what if I need max='1000000'?
var x = slider.value, but if we have max='1000000' we instantly have a 100+% background, how we can fix that?
Thanks for your comment! You can take the maximum value, and calculate this value to 100%. So, if you have 10.000 as maximum, you can say that 10.000 is 100%. Simple math with CSS value = Maximum value / 100. If the value is now 5.300 for example, it will be 53% (5300 / 100). Just divide with the correct value before setting the css.
I am getting error of " sliderVal.addEventListener is not a function
at app.js:3 "
I just want to change the bg color of the slider.
The code :
var sliderVal = document.querySelectorAll("#myRange");
var output = sliderVal.value;
sliderVal.addEventListener('change', function() {
var x = sliderVal.value;
var color = 'linear-gradient(90deg, #515E63' + x + '%, #f6f6f6' + x + '%)';
sliderVal.style.background = color;
});
can i use getelementsbyname or byclassname to display a value in 2 place ? i search on yt and everyone just displays a value slider in 1 place, I want to display the value one on slider and other in other place, tks?
Just use two different classes, and display the output on those two different containers
@@BananaCoding it's work !!! thank you so much! it's wasted me a lot of time to solve, u're savior sir
I liked your video. Very clear.
Do you have a codepen or somthing like this with the code?
Thank your for your comment, really nice to hear that! :-). You are right, I created one: codepen.io/BananaCoding/pen/LKLdNJ
@@BananaCoding thanks
sanks from rusha =) rili useful staff
Spasiba :)
I have a question, how can I make the slider rtl? so the dragging will be from right to left?
Thanks.
Thats fast to do! You can change the attributs in the input tag to: . After that, you have to multiply the shown value with -1 to make it positive again.
Thanks buddy
I seemingly have an issue that's way out of my debugging skills, the console keeps throwing this error:
Uncaught TypeError: Cannot read property 'value' of null
apparently it considers the slider as undefined even tho its declaration statement is the first line of code in the script.
It would be great if someone could offer help, otherwise great vid, I subbed
Thanks for your nice comment :). For that, I need more context. But this looks just like he can‘t get the value, because you pick the slider the wrong way with javascript . You can copy the code from my CodePen, so you can see the difference. Maybe it helps you! codepen.io/BananaCoding/pen/LKLdNJ
@@BananaCoding thanks for the reply, I literally copied your JavaScript code but the issue persists, at this point I'm beginning to think something is wrong with my browser.
Do you included the script the right way? Or is the script actually loading?
Hello mate had the same problem, i tried starting over and found out something was done wrong with the .slider::after and .slider::before, if this styles don't show any numbers, the value will become null in the js it semes. hope this could help you :)
heyy @BananaCoding how can I use this slider to pass the input value to the backend??
Hey, this is an input field element. So put it inside a form element with the method=„POST“. So you can access the value!
@@BananaCoding thank you for fast reply it is working....
i need to have a tool tip on my slider as well, so i figure i can probably position the tool tip the same way you positioned the background in the slider
Another way: The „input“ or „change“ event has an event variable. You can access the mouse X and Y off that event attribute, and put those values to an container with position „absolute“
@@BananaCoding i ended up using the tooltip components offset with a nice constant to keep it where it was supposed to be, input and mousemove events didn't have this mouse x and Y that i could see, but i did see scrollWidth and offset width which both looked handy.
Great work!! Works great on desktop, but the green fill doesn't seem to work on mobile. How to fix it?
Thank you!! I think you need to add a second event listener, touchmove. Mousemove does only work on desktop view. Maybe „input“ as event listener works also!
@@BananaCoding I'll try with input because after writing this last night I realized the touchmove event thing but it didn't work. Let you know! Thanks!
@@BananaCoding working with getElementsByTag("input") and the extra touchmove event in the slider
Does anyone know what color scheme he is using in the ide ? It looks awesome.
Yes I know it. It‘s from the theme „One Dark Pro“
great video! i have a problem though with keeping the value as i reload the page, its for a school project and i cant seem to find any solution to it:(
The scope of this problem is rather large, but is a great starting point for learning key concepts. I hope you got it figured out!
cool
what if you have decimal values range like min is 2.5 and max is 5% so how will you calculate width ?
Calculate it by getting the slider width as pixel value, then set it in relation, like 2,5% is 0 pixel and 5% is the full width of the slider
@@BananaCoding I want something which is completely dynamic because I have different input and there values are also different. Suppose I have a salary range slider also which is 3000 to 20,000 so I want some logic which will work in the all cases.
@@BananaCoding Can we do something like where is the Dot currently fill the bar till that and Dot value actually get by step value
When I try to let the slider go to 1000 instead of 100, then the color goes before the dot. Do you know how to fix this?
Yes, set the CSS value in relation to your slider value. If your slider value is 1000, divide your CSS value by 10
With just one calculation:
let range = max_value - min_value;
let css_value = ( ( slider_value - min_value ) / range ) * 100
what programm do you use in the video?
Visual Studio Code is the IDE
why does no youtube channel ever put the code in the Description?
codepen.io/BananaCoding/pen/LKLdNJ
sorry, but I can not change max of input more than 100, because the colored range outstrips
You can set in in relation, so the highest max value will be 100%
If I keep the value and slider in the same line, the slider changes position based on the value. What's the fix for this?
Hey, thanks for your comment! What do you mean with slider and value in the same line?
The idea in my video is: An input with type "range" has a value, you can take this value with JavaScript or jQuery, and put that value with JavaScript on the correct position like in 11:10! Greetz
@@BananaCoding Sorry for the confusion. Your video is perfect. I just had a question if I put the value in front of the slider, whenever the value reaches single or triple digit the slider changes it's position by that one digit. I hope you get my question.
@@BananaCoding How to determine the position of the thumb. Say if I want the thumb to be in 80 value position, how can I calculate that?
It's in the HTML-Part, you can set the value to 80:
How to display the value beside the slider? On the right side
Just assign the value at 09:50 to another text element next to the whole slider. You can put it in one row, if you set the parent container of the whole slider and the text element to „display: flex;“ and „flex-direction: row;“ for example (in CSS).
👍👍
dude u have so many links for ads but u dont share the code
i wish you would’ve explained WHY you did half the things you did
how do you get this on wordpress
Thanks for the question! In the back-end, you should edit your main.js with a function, that creates this slider bar. After that, you need a plugin, that can create shortcuts for WordPress. So you can add a shortcut for that function in the main.js. Hope you know what I mean!
00:09:20