#2 -webkit- gradient range

with rotation or custom appearance ?

by toubia95

HTML

<form>
<input id="gradient-range" type="range" name="foo" min="0" max="360">
<input id="gradient-range2" type="range" name="foo" min="0" max="360">
</form>

CSS

body {
    padding: 20px;
}

form { position: relative; margin: 50px; width: 1200px; }

#gradient-range {
    -webkit-appearance: none !important;
    background-image:-webkit-linear-gradient(left, hsl(0,100%,50%), hsl(60,100%,50%), hsl(120,100%,50%), hsl(180,100%,50%), hsl(240,100%,50%), hsl(300,100%,50%), hsl(360,100%,50%));
    height:20px;
    width: 300px;
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin: 0% 0%;
}
#gradient-range::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    background:transparent;
    height:24px;
    width:10px;
    border-radius: 3px;
    border: solid 2px hsla(0,0%,0%,1);
}

#gradient-range2 {
    -webkit-appearance: slider-vertical;
}

JavaScript

/* voir du côté de http://bebraw.github.io/colorjoe/ pour firefox */