Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for Styling Range Sliders with CSS
Kevin Lewis
Kevin Lewis

Posted on

     

Styling Range Sliders with CSS

Alt Text

In this post I will cover how to custom style a HTML range input (the slider). You can also get this to work in Internet Explorer, but this guide will just cover Webkit-based browsers and Firefox.

The only thing you need to know terminology wise is that the long bar which indicates the length of the slider is called the 'track' and the knob that you slide along it is called the thumb.

Getting rid of the main default styling

input[type="range"]{-webkit-appearance:none;}input[type="range"]:focus{outline:none;}
Enter fullscreen modeExit fullscreen mode

Styling the track

input[type="range"]::-webkit-slider-runnable-track{background:tomato;height:5px;}input[type="range"]::-moz-range-track{background:tomato;height:5px;}
Enter fullscreen modeExit fullscreen mode

Styling the thumb

input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;height:15px;width:15px;background:pink;margin-top:-5px;border-radius:50%;}input[type="range"]::-moz-range-thumb{height:15px;width:15px;background:pink;margin-top:-5px;border-radius:50%;}
Enter fullscreen modeExit fullscreen mode

You'll notice that the thumb requires a-webkit-appearance: none; in the webkit-prefixed version of these rules.

Alt Text

That's pretty much it! Have fun applying your own custom styles.

I recently added a border and box-shadow to the thumb, and a border-radius to the track, like so:

Alt Text

Top comments(0)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Day: Director of Developer Relations, Directus. Night: Runs You Got This!
  • Location
    Berlin, Germany
  • Education
    Creative Computing @ Goldsmiths, University of London
  • Work
    Developer Relations Lead, Directus
  • Joined

Trending onDEV CommunityHot

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp