I want to customize the looks of the range input type in HTML5 to look something like a progress bar. I've tried applying some common CSS attributes using CSS class but it seems that they are not working.
Can any one direct me how to customize it??
+2
A:
If you're using HTML 5, why not use the progress tag?
<progress value="1534602" max="4603807">33%</progress>
reference here: http://www.w3schools.com/html5/tag_progress.asp
marcgg
2010-08-24 12:02:05
Is there any browser able to render this?
Marco Demajo
2010-08-24 12:12:57
I don't think any browser yet renders this, maybe http://www.modernizr.com/ can help?
cofiem
2010-08-24 13:04:52
+3
A:
The <input type="range"> is pretty new and you are already attempting to customize it with CSS. :)
I wouldn't try that fro tow reasons:
there might be huge compatibility issues now and for the next few (or many) years. Think that in nowdays a form control like
<select>(available since the web started) is still problematrc to be customized with CSS in a cross browser way. For instance if you set apaddingfor the select boxes, many browser (IE7, OPERA9, CHROME5, SAFARI4) will totally ignore the padding. It works only IE8 and on FF 3.6. (all tests done with HTML5 DOCTYPE so in standard mode).The
<input type="range">has been created to show a slider NOT a progress bar, attempting to cheat on it with CSS in order to transform a slider into progress bar it sounds bizarre. Like trying to use CSS to change a<textarea>into a table, but why don't you simply use a<table>to render tables?!
To show a progress bar in HTML5 you should follow the suggestion given by marcgg in his answer. Since no browser is currently rendereing it you could use a simple div with a p inside like this:
<div id="progress" style="position: relative; width: 100px; height: 20px; border: 1px solid #cccccc;">
<p style="position: absolute; left: 0; top: 0; background-color: #0000ff; height: 100%; width: 30%; font-size: 0px;"> </p>
</div>
Then simply update the style.width of inner P element in percent like:
width: 75%
FYI: if you want to do that in simple JS here is the code:
document.getElementById('progress').(getElementsByTagName('p')[0]).style.width = "75%";
Marco Demajo
2010-08-24 12:30:52
well I don't exactly know what's the best option to do. I read a tutorial on HTML5 audio tag and there they'd used the input range type to show the progress of the audio being played. So I just want to customize the looks.Any suggestions on what to use for the same???
ptamzz
2010-08-25 05:41:30
The suggestion of what to use for the same is in my answer! Use a DIV with a P inside. It shows a progress bar, if you don't believe me, just copy and paste the code in a page and try it. Do you have the link of the tutorial? It seesm odd they suggest to modify via CSS a slider to turn it in a progress bar, it's odd! A slider is something the user can interact with by moving the slider, a progress bar is something the user can only see and not change by moving the mouse over it.
Marco Demajo
2010-08-25 08:35:14
well thank you very much. I think I'll be using your suggestion. And well it's from http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/. Actually they didn't suggest to change it using CSS. They were just using the slider bar but then I don't like the looks so I thought if I could just change it using CSS since I know a little bit of it :)
ptamzz
2010-08-25 12:30:04
A:
checkout html5tips link : See the topic on : 28. Create Sliders with the Range Input
Hope this helps
Meryl
2010-08-24 12:44:48
He is not looking for a slider, but for a way to customize a slider and turn it in a progrees bar.
Marco Demajo
2010-08-24 12:50:09