Add slider (#78)

* Add section in docs

* Hide range input on all browsers

Displays indicator as radio outline on Windows 10 Firefox 75

* Add svg icons

* Add thumb styling on range input

* Add track to range input

* Add indicator css for has-recatangular-indicator

* Update styling and labels for range input

* Update example for simple range input

* Remove repeated code

* Remove unused icon and add vertical input style

* Refactor styling and adapt description to fit

* Add style for all vertical lengths and update docs

* Correct 2x to 2px
This commit is contained in:
João Nuno Mota 2020-05-07 21:10:43 +01:00 committed by GitHub
parent a040540135
commit 1e004ff6b7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 196 additions and 0 deletions

View file

@ -0,0 +1,6 @@
<svg width="11" height="21" viewBox="0 0 11 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0V16H2V18H4V20H5V19H3V17H1V1H10V0Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 1V16H2V17H3V18H4V19H6V18H7V17H8V16H9V1Z" fill="#C0C7C8"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 1H10V16H8V18H6V20H5V19H7V17H9Z" fill="#87888F"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 0H11V16H9V18H7V20H5V21H6V19H8V17H10Z" fill="black"/>
</svg>

After

Width:  |  Height:  |  Size: 523 B

View file

@ -0,0 +1,6 @@
<svg width="11" height="21" viewBox="0 0 11 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0V20H1V1H10V0Z" fill="white"/>
<rect x="1" y="1" width="8" height="18" fill="#C0C7C8"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 1H10V20H1V19H9Z" fill="#87888F"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 0H11V21H0V20H10Z" fill="black"/>
</svg>

After

Width:  |  Height:  |  Size: 415 B