html5 range 样式怎么设置起始结束

CSS代码：

input { font-size: 14pxfont-weight: bold }

input[type=range]:before { content: attr(min)padding-right: 5px}

input[type=range]:after { content: attr(max)padding-left: 5px}

output {

display: block

font-size: 5.5em

font-weight: bold

}

HTML代码：

<form method="post">

<h4>音量控制</h4>

<input type="range" name="range" min="0" max="10" step="1" value="" />

<output name="result"> </output>

</form>

JS代码：

(function() {

var f = document.forms[0],

range = f['range'],

result = f['result'],

cachedRangeValue = localStorage.rangeValue ? localStorage.rangeValue : 5

// 检测浏览器是否是足够酷

// 识别range input.

var o = document.createElement('input')

o.type = 'range'

if ( o.type === 'text' ) alert('不好意思，你的浏览器还不够酷，试试最新的Opera浏览器吧。')

// 设置初始值

// 无论是否本地存储了，都设置值为5

range.value = cachedRangeValue

result.value = cachedRangeValue

// 当用户选择了个值，更新本地存储

range.addEventListener("mouseup", function() {

alert("你选择的值是：" + range.value + ". 我现在正在用本地存储保存此值。在现代浏览器上刷新并检测。")

localStorage ? (localStorage.rangeValue = range.value) : alert("数据保存到了数据库或是其他什么地方。")

}, false)

// 滑动时显示选择的值

range.addEventListener("change", function() {

result.value = range.value

}, false)

})()

/* range控件 */

input[type=range] {

    display: block

    position: relative

    width: 480px

    height: 48px

    margin: 8px 0

    padding: 0 64px

    background: none

    -webkit-appearance: none

    -moz-appearance: none

    appearance: none

    cursor: pointer

}

input[type=range]:hover:before, 

input[type=range]:hover:after {

    color: #608000

}

input[type=range]:hover::-webkit-slider-runnable-track {

    background-color: #85b200

}

input[type=range]:hover::-moz-range-track {

    background-color: #85b200

}

input[type=range]:focus::-webkit-slider-runnable-track {

    background-color: #85b200

}

/*range前后图标*/

input[type=range]:before, 

input[type=range]:after {

    content: ""

    display: block

    position: absolute

    top: 8px

    width: 32px

    height: 32px

    line-height: 32px

    font-size: 32px

    color: #000

    text-align: center

    font-family: "你的图标字体名称" !important

    speak: none

    font-style: normal

    font-weight: normal

    font-variant: normal

    text-transform: none

    -webkit-font-smoothing: antialiased

    -ms-font-smoothing: antialiased

    -o-font-smoothing: antialiased

    font-smoothing: antialiased

    -moz-osx-font-smoothing: grayscale

}

input[type=range]:before {

    left: 16px

}

input[type=range]:after {

    right: 16px

}

input[type=range]#sort_tra:before {

    content: "\e000"

}

input[type=range]#sort_tra:after {

    content: "\e001"

}

/*range中心圆点*/

input[type=range]::-webkit-slider-thumb {

    -webkit-appearance: none

    appearance: none

    height: 18px

    width: 18px

    border-radius: 100%

    background-color: #fff

    cursor: pointer

    margin-top: -7px

    -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4)

    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4)

}

input[type=range]::-moz-range-thumb {

    -moz-appearance: none

    appearance: none

    height: 18px

    width: 18px

    border-radius: 100%

    background-color: #fff

    cursor: pointer

    -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4)

    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4)

}

input[type=range]::-ms-thumb {

    -ms-appearance: none

    appearance: none

    height: 18px

    width: 18px

    border-radius: 100%

    background-color: #fff

    cursor: pointer

    -ms-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4)

    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4)

}

input[type=range]::slider-thumb {

    -webkit-appearance: none

    appearance: none

    height: 18px

    width: 18px

    border-radius: 100%

    background-color: #fff

    cursor: pointer

    margin-top: -6px

    -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4)

    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4)

}

/*range轨道*/

input[type=range]::-webkit-slider-runnable-track {

    width: 100%

    height: 4px

    background-color: #aaa

    border-radius: 4px

    cursor: pointer

}

input[type=range]::-moz-range-track {

    width: 100%

    height: 4px

    background-color: #aaa

    border-radius: 4px

    cursor: pointer

}

input[type=range]::-ms-track {

    width: 100%

    height: 3px

    border-color: transparent

    color: transparent

    border-radius: 3px

    background: transparent

    cursor: pointer

}

/*已达进度*/

input[type=range]::-ms-fill-lower {

    background-color: #85b200

}

/*未达进度*/

input[type=range]::-ms-fill-upper {

    background-color: #aaa

}

input[type=range]::-ms-ticks-before {

    display: none

}

input[type=range]::-ms-ticks-after {

    display: none

}

不包含range的标题，前后图标用的字体图标，可以自行更换。经兼容测试，进度效果仅在IE9及以上版本有效（不影响实际使用）。

Chromium浏览器效果如下：

IE9及以上：

---