| Description |
|---|
| input-range.js is a ES5 custom element, a highly stylizable component with the same functionality as the original input range (mimic iOS and PC behaviour), compatible with all modern browsers from IE11+. |
| Native input type="range" |
|---|
| input-range default style |
|---|
|
|
| input-range Firefox style |
|---|
|
|
| input-range Opera style |
|---|
|
|
| input-range Chrome style |
|---|
|
|
| input-range Edge style |
|---|
|
|
| input-range iOS style |
|---|
|
|
| Events | |
|---|---|
| input | change |
| 50 | 50 |
|
|
|
| Attributes | |||
|---|---|---|---|
| min | step | max | value |
| -15 | 30.234 | 223.75 | 100 |
|
|
105.936 | ||
| 105.936 | |||
| it even works transformed | ||
|---|---|---|
| rotate | translateX | translateY |
| 30º | 10px | 10px |
|
|
||
| rotate | translateX | translateY |
| 90º | 10px | 5px |
|
|
||
| rotate | translateX | translateY |
| 120º | 10px | 5px |
|
|
||
| rotate | translateX | translateY |
| 180º | 10px | 5px |
|
|
||
| rotate | translateX | translateY |
| 220º | 10px | 5px |
|
|
||
| rotate | translateX | translateY |
| 300º | 10px | 5px |
|
|
||
| rotate | scaleX | scaleY |
| 220º | 1.5 | 2.5 |
|
|
||