Custom Animated Range Slider using HTML CSS & JavaScript

Custom Animated Range Slider using HTML CSS & JavaScript
Download Codes From Here - www.codingnepa...
My Code Editor - • Best Text Editor for H...
Facebook - / coding.np
Instagram - / coding.np
Music Credit:
Track: BEAUZ & JVNA - Crazy [NCS Release]
Music provided by NoCopyrightSounds.
➤ Watch: • BEAUZ & JVNA - Crazy |...
Track: Lost Sky - Dreams pt. II (feat. Sara Skinner) [NCS Release]
Music provided by NoCopyrightSounds.
➤ Watch: • Lost Sky - Dreams pt. ...

[@CodingNepal]

Responsive Contact us Form using HTML & CSS - ruclips.net/video/OQ0hgVVwNOI/видео.html

[@serjmarkelov9915]

Thanks, you saved my life!

[@CodingNepal]

You're welcome... Stay tuned 😁

[@Jet1323]

amazing slider :) but i noticed you allow the tip tool travel from one side of the slider pointer to another while you move it
you should put a leash on it xD

[@lonesomesam]

Really straightforward, thanks a lot man!

[@aayush135]

Highly appreciate your tutorial. Thanks for amazing work.

[@victorgarcia-kk6zl]

eres un crak Thank you saludos desde Mexico

[@victorgarcia-kk6zl]

amigo el trabajo que has echo es maravilloso

[@kryptonnn652]

Your tutorial always amazing bro. thank you so much

[@CodingNepal]

You're welcome bro 💙

[@JulioTex]

So elegant. Thanks for sharing it 😊

[@CodingNepal]

You are so welcome!

[@abderrezzakerrezzaki8383]

Your work is amazing

[@CodingNepal]

Thank you 💙

[@romuloalves9349]

Ótimo vídeo parabéns 👏.

[@serispeaks]

Incredible 🎉 love it

[@ongpytran4552]

Awesome!! Could you make a video about page pre-loader please!!

[@CodingNepal]

I already made a video on it.

[@ongpytran4552]

@@CodingNepal ok let me find it

[@CodingNepal]

@@ongpytran4552 Here is a link of that video - ruclips.net/video/lczgnhMphdU/видео.html

[@Marquicios1986]

thanks !!! I need custom de property range-progress in chrome!

[@panthero7]

Thank you

[@CodingNepal]

You're welcome 💙

[@panthero7]

@@CodingNepal I follow you on every video

[@hash5075]

Eres un crack

[@mdms4549]

Very Awesome! Thanks friend

[@CodingNepal]

Thank you too!

[@Knuddelfell]

Another fancy animation 😅

[@CodingNepal]

Thank you 💙 😁

[@tinhtoozaw2755]

would have been better without music and some explanation

[@Knuddelfell]

Like 👍

[@JeahBee66]

Hello, nice work. I would like that the value will stay when focus is lost. How can I change that?
regards
Joerg

[@bulobon9845]

Your SliderValue div is not centered relative to the slider.
There is an offset which is created with the movement of the slider.
I thought I had found the perfect tutorial.. but no.

[@kodeeshwarar3016]

Next time upload Menu bar animations video I still waiting bro

[@CodingNepal]

Visit channel... I already many.

[@kilian8201]

Thanks buddy👌💯

[@aminefayaz7532]

Good job

[@CodingNepal]

Thank you 💙

[@khanzarkhanzar5849]

big fan

[@user-ch1gm3os5d]

amazing!

[@CodingNepal]

Thank you 💙

[@Uche.Azinge]

Great tutorial buddy! Any chance you can share the direct link to the code. I followed the link in the description but couldn't find the code. Thanks

[@CodingNepal]

Here is the direct link www.codingnepalweb.com/custom-animated-range-slider-javascript/

[@Gamer-zv4mm]

What software do you use to write code?

[@ahardworkingbee]

99.98% correct!

[@priyadharshinis6039]

Sir please respond how to align right center this box please reply me sir

[@syedferoz207]

Hi
::-webkit-range-progress crome is not working . how to slove this ?

[@arjitraturi604]

Did you find a solution for this?

[@akashmaurya6784]

I visit your website and I saw many website like yours same
How to make this website can you pls tell me

[@CodingNepal]

My website made on blogger.

[@akashmaurya6784]

Can you pls tell he how i saw many thinks but i'm not able to make website like yours

[@tanveerhussain3881]

I like it

[@CodingNepal]

Thank you 💙

[@SofiNupi]

Hi thank you, I see it good but when i tried with higher numbers the position of the sliderValue is not correct. I have to do a slide with max of 10.000

[@gabrielhenrique073]

Make one with 100 max and multiply his current value by 100 when u gonna use it

[@rehandeveloper2904]

try slider.value and don't divide it by 2 then i hope it will follow the webkit slider thumb

[@muhammadhanyalshakhshir2351]

Cool!!

[@lusanto9]

Genial!!

[@CodingNepal]

..?

[@lusanto9]

@@CodingNepal Great job

[@CodingNepal]

Thank you 💙

[@NoumanKhan-ck7vx]

Source code plz

[@rehandeveloper2904]

This Source Code will help you to solve the problem of current hover value position
show_thumb_current_time = () =>{
let current_hover_span = document.getElementById('slider_hover_time');
setInterval(() => {
if(slider.value>70){
current_hover_span.style.left=(slider.value/1.01)+'%';
}
else if(slider.value

[@gabyyhshss]

no me funciona :(

[@gabyyhshss]

Help me PLS!

[@paoloose]

LIKE LIKE LIKE

[@raunak5344]

Please explain the function of each line of the js code 🙏🏻

[@erfanasadi7549]

when range input changed, function called and set range value to content of slidevalue.
first lines is accessing to elements in document.

[@raunak5344]

@@erfanasadi7549 you seem to be expert here. I badly need you. Can i contact you, please ????

[@TimMellander]

​@@raunak5344 is there anything particular that you're wondering about? =)

[@raunak5344]

@@TimMellander Yes , I can't figure out how the length of range of that's slider value is determined