<html>
<head>
<style>

input {
    -webkit-appearance: none;
    background-color: Red;
    height: 10px;
    width: 100px;
}

input::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: Green;
    width: 10px;
    height: 10px;
}

</style>
<script>

/*

Tests whether style slider thumb moves to the new position when input element's
value is updated.

*/

if (window.testRunner)
    testRunner.waitUntilDone();

function runTest()
{
    setTimeout(function()
    {
        document.getElementById('slider').value = 100;
        if (window.testRunner)
            testRunner.notifyDone();
    }, 0);
}

</script>
</head>
<body onload="runTest()">
<input id="slider" type="range" value="0">
</body>
</html>