Guillaume Duverger - Développement & Graphisme - Blog

Input range HTML5 avec CSS3/JS

💡 L'objectif de cette démonstration est de vous montrer comment personnaliser un élément input de type range.

Sans CSS :

Code :

<input type="range" style="height:200px;width:10px" min=0 max=100 value=50 class=vertical orient=vertical>

Avec CSS :

Code :

<input type="range" class='range_css'>
<input type="range" style='cursor:n-resize;transform:rotate(-90deg) translate(-50%,0)' class=range_css>

/*input range CSS3*/
.range_css{
-webkit-appearance:none;
width:300px;
height:1rem;
background:linear-gradient(to bottom,#26a65b 10%,#36e27d);
cursor:ew-resize;
border-radius:1.5rem}

/*****ie*****/

.range_css::-ms-track {
height:1.4rem;
border-radius:1.5rem;
background:transparent;
border-color:transparent;
color:transparent;/*enleve les traits*/}

.range_css::-ms-fill-lower {
height:1.4rem;
background:linear-gradient(to bottom,#26a65b 10%,#36e27d);
border:0 solid transparent;
border-radius:1.5rem}

.range_css::-ms-fill-upper {
background:linear-gradient(to bottom,#26a65b 10%,#36e27d);
border:0 solid transparent;
border-radius:1.5rem}

.range_css::-ms-thumb {
border:1px solid #ddd;
width:.8rem;
background:white;
height:.8rem;
border-radius:50%;
box-shadow:0 0 .125rem #aaa}

.range_css:focus::-ms-fill-lower,
.range_css:focus::-ms-fill-upper {

background:linear-gradient(to bottom,#26a65b 10%,#36e27d)

}

.range_css::-ms-tooltip{display:none}/*enleve le title*/

/*****fin ie*****/

/*****firefox*****/
.range_css::-moz-range-thumb{
border:1px solid #ddd;
width:1.4rem;
height:1.4rem;
border-radius:50%;
box-shadow:0 0 .125rem #aaa}

.range_css::-moz-range-track{
border:3px solid transparent;
padding:.5rem;
height:1rem;
border-radius:1.5rem;
background:none}
/*****fin firefox*****/


/*****Chrome,Opera*****/
.range_css::-webkit-slider-thumb{
-webkit-appearance:none;  
border:1px solid #ddd;
width:1.4rem;
height:1.4rem;
border-radius:50%;
background:white;
box-shadow:0 0 .125rem #aaa}

/*****fin Chrome,Opera*****/

Avec JS :

<script src="powerange.min.js"></script>
        
var elem = document.querySelector('.js-range');
var init = new Powerange(elem);    
defaults = {
    callback      : function() {}
  , decimal       : false
  , disable       : false
  , disableOpacity: .5
  , hideRange     : false
  , klass         : ''
  , min           : 0
  , max           : 100
  , start         : null
  , step          : null
  , vertical      : false
};

/*css range js*/
.range-bar{
background:#9e9e9e;
border-radius:5px;
display:block;
height:4px;
position:relative;
width:100%}

.range-quantity {
background:#26A65B;
border-radius:5px;
display:block;
height:100%;
width:0}

.range-handle {
background:#f1f1f1;
background:radial-gradient(ellipse,#f1f1f1 30%,#c7c7c7);
border-radius:50%;
cursor:move;
height:30px;
left:0;
top:-13px;
position:absolute;
width:30px}

.range-min,
.range-max {
color:#fff;
font-size:12px;
height: 20px;
padding-top: 4px;
position: absolute;
text-align: center;
top: -9px;
width: 24px}

.range-min {left:-30px}

.range-max {right:-30px}

.vertical {height: 100%;width: 4px;}
.vertical > .range-quantity {
  bottom: 0;
  height: 0;
  position: absolute;
  width: 100%;
}

.vertical .range-handle {
  bottom: 0;
  left: -13px;
  top: auto;
}

.vertical .range-min,
.vertical .range-max {
  left: -10px;
  right: auto;
  top: auto;
}

.vertical .range-min {
  bottom: -30px;
}

.vertical .range-max {
  top: -30px;
}

.unselectable {
-webkit-touch-callout:none;
-webkit-user-select:none;
-moz-user-select:none;
user-select:none}
/*****fin css range js*****/