range转换html,HTML5中range滑块条的应用

滑动条是由全新表单样式的展现和运用，滑动条的运用如何利用CSS3的样式去控制滑动条的位置，大小值的设置，首先要定义函数的变化，给予这个滑动条以变量的存在！下面是一段来自HTML5研究小组的源代码：

var initSlider = function() {  

$('input[type=range]').each(function() {

var $input = $(this);

var $slider = $('

class="' + $input.attr('class') +

'">

');

var step = $input.attr('step');

$input.after($slider).hide();

$slider.slider({

min: $input.attr('min'),

max: $input.attr('max'),

step: $input.attr('step'),

change: function(e, ui) {

$(this).val(ui.value);

}

});

});

};

下面是我在看《html5用户指南》中关于一段简单的的代码，表示就是将一个表单名定义为tap的1到11的滑块条

name=tap>

我在这里复制的这段代码，里面定义了几个变量$，使得我们的min max有了变化，使得页面更加变得活跃了！

在HTML5中date和time都会去验证一个精准的日期和时间！

step控制的是输入渐进的程度，也就是误差的大小，当step=any可以允许任何精度选择一天中的任何时间！

我们对于这些HTML5的代码也是可以由CSS3来定义样式化的

{windth:500px;color=red;font-family:cursive;font-size:2em}

给range定义为500像素宽，颜色为红色，并设置字体和字大小，来控制和样式化我们的range滑块条，让他更加的漂亮和优化得更好！