Customized Input Type Range

What and Why?

So, here I am using the input type range to create sliders. One day I needed to use a range for a volume bar and could not find a decent vertical range customized with css so I decided to create one and share it with all of you. I was using the default setting “appearance: vertical” but was not working properly so I came up with an idea to use CSS3 transformations. Here I have created 8 different sliders, 4 horizontal and 4 vertical.

Before starting, you can take a look at the DEMO .

In order to create a customise your range, first create an input type range element given a min and max of 0 and 1 with a stepping value of 0.1. We also need to assign the class “range”:

<input type=”range” class=”range”  min=’0′ max=’1′ step=’0.1′ value=’1′ >

In your style sheet or between the <style> </style> tags add the below css classes explained using comments:

Continue reading