Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Cezary Burzykowski
Cezary Burzykowski
18,291 Points

How to style <input type=range /> element?

Hello there!

Currently I'm working on HTML5 video player and I got stuck while styling custom controls for the player. The control I have trouble styling is a video progress bar which is a <input type="range" /> element.

Here is a link to my entire workspace: https://teamtreehouse.com/workspaces/22622092#. I have also included and mockup image to give you the idea what type of progress bar I want to achieve.

And the very moment I can't change:

  • the color of progress bar
  • the length of the progress bar (at the very moment it is just a zipper)
  • the border-radius of the progress bar

Here is my HTML code:

<!DOCTYPE html>

<html>

<head>
    <title>Video Player Project</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet">
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/style.css" />  
</head>
<body>
    <div class="container">
        <div class="video-container">
            <video id="video">
                <source type="video/mp4" src="video/video.mp4" />
                <source type="video/ogg" src="video/video.ogg" />
                <track label="English subtitles" src="captions.vtt" srclang="en" default />
            </video>
            <div class="video-controls">
                <input type="range" id="seek-bar" value="0">
                <button type="button" id="play-pause"><img src="icons/play-icon.png" /></button>
            <button type="button" id="mute">Mute</button>
            <input type="range" id="volume-bar" min="0" max="1" step="0.1" value="1">
            <button type="button" id="full-screen">Full-Screen</button>
            </div>
        </div>
        <div class="text-container">
            <p>Now that we've looked at the architecture
                of the internet, let's see how you might connect your personal devices to
                the internet inside your house. Well there are many ways to
                connect to the internet, and most often people connect wirelessly.</p>
            <p>Let's look at an example of how
                you can connect to the internet. If you live in a city or a town,
                you probably have a coaxial cable for cable Internet, or a phone line if you
                have DSL, running to the outside of your house, that connects you to
                the Internet Service Provider, or ISP.</p>
            <p>If you live far out in the country,
                you'll more likely have a dish outside your house, connecting
                you wirelessly to your closest ISP, or you might also use the telephone system. </p>
            <p>Whether a wire comes straight from
                the ISP hookup outside your house, or it travels over radio
                waves from your roof, the first stop a wire will make once
                inside your house, is at your modem.</p>
            <p>A modem is what connects the internet
                to your network at home. A few common residential modems are DSL or</p>
        </div>
    </div>
    <script type="text/javascript" src="js/app.js"></script>
</body>

</html>

And here is my CSS:

#video-container {
    width: 640px;
    height: 365px;
    position: relative;
}

#video-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 5px;
    opacity: 0;
    -webkit-transition: opacity .3s;
    -moz-transition: opacity .3s;
    -o-transition: opacity .3s;
    -ms-transition: opacity .3s;
    transition: opacity .3s;
    background-image: linear-gradient(bottom, rgb(3,113,168) 13%, rgb(0,136,204) 100%);
    background-image: -o-linear-gradient(bottom, rgb(3,113,168) 13%, rgb(0,136,204) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(3,113,168) 13%, rgb(0,136,204) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(3,113,168) 13%, rgb(0,136,204) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(3,113,168) 13%, rgb(0,136,204) 100%);

    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.13, rgb(3,113,168)),
        color-stop(1, rgb(0,136,204))
    );
}

#video-container:hover #video-controls {
    opacity: .9;
}

button {
    background: rgba(0,0,0,.5);
    border: 0;
    color: #EEE;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
}

button:hover {
    cursor: pointer;
}

#seek-bar {
    width: 360px;
}

#volume-bar {
    width: 60px;
}

I would appreciate any help!

ps. I know that the order of CSS declarations is not appropriate. Please don't be bothered by it

4 Answers

Jacob Anderson
Jacob Anderson
6,718 Points

Hi Cezary,

Happy to help! I was asking the same question when making that savings calculator for a project, but because the range input is a new addition in HTML5 (still a draft), it is only supported in Microsoft's Edge browser and Firefox.

Edge

input[type="range"]::-ms-fill-lower { 
     //Your style here Cezary
}
input[type="range"]::-ms-fill-upper { /
     //Your style here Cezary
}

Firefox - Only before thumb

input[type="range"]::-moz-range-progress {
     //Your style here Cezary
}

Hope that helps, happy coding!

Jacob Anderson
Jacob Anderson
6,718 Points
Jacob Anderson
Jacob Anderson
6,718 Points

Hi Cezary! How's it going?

Input range sliders are definitely the trickiest inputs to style. CSS Tricks have a great article on it here: https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/

The thing you need to bare in mind is vendor-prefixing (-moz, -webkit etc), so that it appears how you want it to on all browsers!

Here is a link to a pen of mine on CodePen with some basic styling on a range input: https://codepen.io/jacoba/pen/wWQKZw

Cezary Burzykowski
Cezary Burzykowski
18,291 Points
Cezary Burzykowski
Cezary Burzykowski
18,291 Points

Hey Jacob!

Thank you so much for the links, they are really helpful :) I'm trying to style my input range sliders since yesterday and it literally drives me crazy. I would like to ask you one more question, perhaps you will have the answer: is it possible to style area before the Thumb and after the Thumb in different colors? (so for example slider in your CodePen would turn red on the left side of the dot)

Thank you again,

Cezary

Cezary Burzykowski
Cezary Burzykowski
18,291 Points
Cezary Burzykowski
Cezary Burzykowski
18,291 Points

You were extremely helpful Jacob, thank you once again :)