JavaScript + CSS Range Slider | Costum Value Range Slider Webdesign Tutorial

Поділитися
Вставка
  • Опубліковано 29 жов 2024

КОМЕНТАРІ • 121

  • @AlexTechie
    @AlexTechie 4 роки тому +22

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

    • @BananaCoding
      @BananaCoding  4 роки тому +2

      Thanks for your comment! Nice to hear that! Of course you are right, ‚input‘ is much better to use here!

    • @MisterWealth
      @MisterWealth 2 роки тому

      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?

  • @emarciobdirector
    @emarciobdirector 4 роки тому +4

    I'm doing an online bootcamp and this video helped me a lot to solve an exercise. Thanks.

  • @kevincarter1645
    @kevincarter1645 2 роки тому

    I love how in depth this was, coming from a junior software engineer.

  • @dariusvaitkus965
    @dariusvaitkus965 4 роки тому +6

    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}%)`;

  • @kinghangma2731
    @kinghangma2731 5 років тому +3

    This guy deserves more subscribers

    • @BananaCoding
      @BananaCoding  5 років тому +1

      Thank you very much! So glad to hear that :)!

  • @pierrecalimero70
    @pierrecalimero70 4 роки тому +21

    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

    • @GokhanDGamer
      @GokhanDGamer Рік тому

      You are a hero!! :D You helped me a lot

    • @ogzhn
      @ogzhn Рік тому

      You are deep of man !

    • @VictorAlmeidaDev
      @VictorAlmeidaDev Рік тому

      You're awesome! Thank you very much

  • @aosppina_
    @aosppina_ Рік тому

    Thanks for tutorial, you saved my life. Good job

  • @phinok.m.628
    @phinok.m.628 5 років тому +3

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

    • @BananaCoding
      @BananaCoding  5 років тому

      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 :(!

    • @phinok.m.628
      @phinok.m.628 5 років тому

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

    • @BananaCoding
      @BananaCoding  5 років тому

      Yep that‘s what I mean, but it seems I‘m wrong, so thanks for that note :)!

  • @anggagumilar9416
    @anggagumilar9416 3 роки тому +1

    Thanks !
    It's very simple and helpful

  • @pedroluis4004
    @pedroluis4004 Рік тому +1

    Thanks!!

  • @MisterWealth
    @MisterWealth 2 роки тому +1

    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?

  • @mudandmoss4132
    @mudandmoss4132 3 роки тому

    An elegant solution!

  • @novakk95
    @novakk95 3 роки тому

    Thanks, man! Helped me a lot! Thumbed up!

  • @zumrudaliyeva241
    @zumrudaliyeva241 4 роки тому +8

    This was soo helpful, you saved my life :) thanks a lot

  • @Alexandr_16kz_22rus
    @Alexandr_16kz_22rus 2 роки тому

    Чувак, как у нас говорят: "ничего не понятно, но очень интересно" )))
    Я и вправду мало понял, что ты говоришь, но понял, что ты кодил - спасибо тебе, бро!!!
    Для чего ты при написании border-radius произносишь "border minus radius"? )))

  • @helloanshu4080
    @helloanshu4080 Рік тому +1

    thanks mate!

  • @sumedhburbure4173
    @sumedhburbure4173 3 роки тому

    Very Helpful. Thank you!

  • @shudhdesi6658
    @shudhdesi6658 4 роки тому

    Thanks Man!!!!! You save my life......

  • @cherifaarouna9731
    @cherifaarouna9731 2 роки тому

    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

  • @tshiatshipo1264
    @tshiatshipo1264 3 роки тому

    been wondering why my input range doesn't cooperate with my text, and this video solved it

  • @bahram1010
    @bahram1010 3 роки тому

    If I had 100 likes, I would give you all! Thank you bro!

  • @AlexTechie
    @AlexTechie 4 роки тому

    Good stuff. I see that you're still making videos, so I sub'd. Keep it up. 👍

  • @jurimudry62
    @jurimudry62 3 роки тому

    It was very useful. Thank you!!!

  • @Robischon
    @Robischon 3 роки тому +1

    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;
    })

  • @thecolorblue7427
    @thecolorblue7427 9 місяців тому

    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)

  • @robingergelyfi4829
    @robingergelyfi4829 4 роки тому +1

    Very good, thank you! Is it possible that instead of number value we "attach" separate images?

  • @const1525
    @const1525 4 роки тому

    Amazing. Thanks bro!

  • @pierrecalimero70
    @pierrecalimero70 4 роки тому +1

    and use the "change" event listener because mousemove doesn't work with phone device

  • @arijitghosh6378
    @arijitghosh6378 3 роки тому

    It was very helpful. Thanks

  • @diegomedflo
    @diegomedflo 4 роки тому

    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.

  • @julianapereira381
    @julianapereira381 3 роки тому

    I wish I could like this video 1000x thanks

  • @ИванПятигорец
    @ИванПятигорец 3 роки тому

    it`s perfect, thank you very much

  • @MagicAdobe
    @MagicAdobe 3 роки тому

    I'm so grateful man :)

  • @brandongamingnl9753
    @brandongamingnl9753 4 роки тому +1

    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?

    • @BananaCoding
      @BananaCoding  4 роки тому +1

      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

  • @ridetopride1224
    @ridetopride1224 4 роки тому

    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

    • @shubhamh7451
      @shubhamh7451 3 роки тому

      try calling the function at the start of the page

  • @mukeshsoni7002
    @mukeshsoni7002 7 місяців тому

    Why its chaging the background color and not the slider color?

  • @mohammedtouhid9194
    @mohammedtouhid9194 3 роки тому

    Thank you for your Nice video, its really helped me alot

  • @Daniel-nb3kk
    @Daniel-nb3kk 3 роки тому

    Thanks man! :)

  • @Clamator
    @Clamator Рік тому

    1000000/100

  • @whodanyalahmed
    @whodanyalahmed 4 роки тому

    Soo helpful

  • @Herzfeld10
    @Herzfeld10 4 роки тому

    Sliders are great to adjust Walew

  • @eugenemaster1
    @eugenemaster1 5 років тому

    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?

    • @BananaCoding
      @BananaCoding  5 років тому +1

      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.

  • @pranaykrmajee1432
    @pranaykrmajee1432 3 роки тому

    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;
    });

  • @shintarousatomi
    @shintarousatomi 3 роки тому

    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?

    • @BananaCoding
      @BananaCoding  3 роки тому +1

      Just use two different classes, and display the output on those two different containers

    • @shintarousatomi
      @shintarousatomi 3 роки тому

      @@BananaCoding it's work !!! thank you so much! it's wasted me a lot of time to solve, u're savior sir

  • @keren1978
    @keren1978 5 років тому +3

    I liked your video. Very clear.
    Do you have a codepen or somthing like this with the code?

    • @BananaCoding
      @BananaCoding  5 років тому +5

      Thank your for your comment, really nice to hear that! :-). You are right, I created one: codepen.io/BananaCoding/pen/LKLdNJ

    • @keren1978
      @keren1978 5 років тому

      @@BananaCoding thanks

  • @truedivan
    @truedivan 5 років тому

    sanks from rusha =) rili useful staff

  • @keren1978
    @keren1978 5 років тому

    I have a question, how can I make the slider rtl? so the dragging will be from right to left?
    Thanks.

    • @BananaCoding
      @BananaCoding  5 років тому +1

      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.

  • @andrelontempra7961
    @andrelontempra7961 3 роки тому

    Thanks buddy

  • @abdelazizboudabia5044
    @abdelazizboudabia5044 5 років тому +2

    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

    • @BananaCoding
      @BananaCoding  5 років тому

      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

    • @abdelazizboudabia5044
      @abdelazizboudabia5044 5 років тому

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

    • @BananaCoding
      @BananaCoding  5 років тому

      Do you included the script the right way? Or is the script actually loading?

    • @wastedart1794
      @wastedart1794 4 роки тому

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

  • @mohitverma1513
    @mohitverma1513 3 роки тому

    heyy @BananaCoding how can I use this slider to pass the input value to the backend??

    • @BananaCoding
      @BananaCoding  3 роки тому

      Hey, this is an input field element. So put it inside a form element with the method=„POST“. So you can access the value!

    • @mohitverma1513
      @mohitverma1513 3 роки тому

      @@BananaCoding thank you for fast reply it is working....

  • @Meleeman011
    @Meleeman011 3 роки тому

    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

    • @BananaCoding
      @BananaCoding  3 роки тому +1

      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“

    • @Meleeman011
      @Meleeman011 3 роки тому

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

  • @creoluegoexisto-podcast877
    @creoluegoexisto-podcast877 4 роки тому

    Great work!! Works great on desktop, but the green fill doesn't seem to work on mobile. How to fix it?

    • @BananaCoding
      @BananaCoding  4 роки тому

      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!

    • @creoluegoexisto-podcast877
      @creoluegoexisto-podcast877 4 роки тому

      @@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!

    • @creoluegoexisto-podcast877
      @creoluegoexisto-podcast877 4 роки тому

      @@BananaCoding working with getElementsByTag("input") and the extra touchmove event in the slider

  • @pavitkailay5174
    @pavitkailay5174 4 роки тому

    Does anyone know what color scheme he is using in the ide ? It looks awesome.

    • @BananaCoding
      @BananaCoding  4 роки тому +1

      Yes I know it. It‘s from the theme „One Dark Pro“

  • @jackswagskog
    @jackswagskog 4 роки тому

    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:(

    • @austinbritton1029
      @austinbritton1029 4 роки тому +1

      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!

  • @circulartext
    @circulartext 2 роки тому

    cool

  • @Umarfarooq-gg7qc
    @Umarfarooq-gg7qc 4 роки тому

    what if you have decimal values range like min is 2.5 and max is 5% so how will you calculate width ?

    • @BananaCoding
      @BananaCoding  4 роки тому

      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

    • @Umarfarooq-gg7qc
      @Umarfarooq-gg7qc 4 роки тому

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

    • @Umarfarooq-gg7qc
      @Umarfarooq-gg7qc 4 роки тому

      @@BananaCoding Can we do something like where is the Dot currently fill the bar till that and Dot value actually get by step value

  • @Saaaaaaaaaaaaaaaaaaadwadawdwad
    @Saaaaaaaaaaaaaaaaaaadwadawdwad 3 роки тому

    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?

    • @BananaCoding
      @BananaCoding  3 роки тому

      Yes, set the CSS value in relation to your slider value. If your slider value is 1000, divide your CSS value by 10

    • @BananaCoding
      @BananaCoding  3 роки тому

      With just one calculation:
      let range = max_value - min_value;
      let css_value = ( ( slider_value - min_value ) / range ) * 100

  • @Bigjuergo
    @Bigjuergo 3 роки тому

    what programm do you use in the video?

  • @themakerofworlds1886
    @themakerofworlds1886 4 роки тому +1

    why does no youtube channel ever put the code in the Description?

    • @BananaCoding
      @BananaCoding  4 роки тому +1

      codepen.io/BananaCoding/pen/LKLdNJ

  • @tanitapak4839
    @tanitapak4839 3 роки тому

    sorry, but I can not change max of input more than 100, because the colored range outstrips

    • @BananaCoding
      @BananaCoding  3 роки тому

      You can set in in relation, so the highest max value will be 100%

  • @amarshetty7461
    @amarshetty7461 5 років тому

    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?

    • @BananaCoding
      @BananaCoding  5 років тому +1

      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

    • @amarshetty7461
      @amarshetty7461 5 років тому

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

    • @amarshetty7461
      @amarshetty7461 5 років тому

      @@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?

    • @BananaCoding
      @BananaCoding  5 років тому +1

      It's in the HTML-Part, you can set the value to 80:

  • @sajid8975
    @sajid8975 4 роки тому

    How to display the value beside the slider? On the right side

    • @BananaCoding
      @BananaCoding  4 роки тому +1

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

  • @Arkillus
    @Arkillus 4 роки тому

    👍👍

  • @michaelcarnevale5620
    @michaelcarnevale5620 2 роки тому

    dude u have so many links for ads but u dont share the code

  • @haleykimbrough9469
    @haleykimbrough9469 3 роки тому

    i wish you would’ve explained WHY you did half the things you did

  • @joshcaughman7101
    @joshcaughman7101 5 років тому

    how do you get this on wordpress

    • @BananaCoding
      @BananaCoding  5 років тому

      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!

  • @topsports2460
    @topsports2460 4 роки тому

    00:09:20