darlanrod / input-range-scss Goto Github PK

Styling Cross-Browser Compatible Range Inputs with Sass

License: MIT License

CSS 38.74% HTML 6.68% SCSS 54.58%

input range scss sass form cross-browser npm npm-package front-end design

input-range-scss's Introduction

Styling Cross-Browser Compatible Range Inputs with Sass / SCSS

Sass component for customizing the input range using the native properties of each browser. Based on article Styling Cross-Browser Compatible Range Inputs with CSS from CSS Tricks blog.

NPM Package

npm i input-range-scss

Features

Variables for easy customization
Uses the native properties of each browser
Preserves accessibility
Cross-browser compatible

Example

Usage

To use this library in your stylesheets, import it as a Sass module:

@use 'input-range-scss';

To override the default styling, use the with keyword along with any variables you would like to override, for example:

@use 'input-range-scss' with (
  $track-color: red,
  $thumb-color: blue,
  $thumb-height: 2em,
  $thumb-width: 2em,
);

For a complete list of variables see https://github.com/darlanrod/input-range-scss/blob/master/_inputrange.scss#L9.

NB. including the module will apply styles all elements matching the CSS selector [type='range'].

Changelog

To see the change history of this project, check out the changelog.md file.

input-range-scss's People

Contributors

Stargazers

Watchers

Forkers

cookpete bantya danielbuechele russellwmy borm sborer xaviju davedele n0nick samogray tsergeytovarov lachlann danclaydon kounelios13 fernyherrera imseo benkalsky dmccaffree dive2pro mpavel vacigit yngvebn mindsonar johnnyma lasserafn webslavik bonez0607 paulowd frank-laemmer zaptronic michigancliffy pre1ude kfeathers stubbystudios-zz gufnz lucassveloso ira-ivakha wdietz self22 uurehman burbuli8ra jeffschram deanpoulin edgewoodsoftware crazzyguti jnnttlpcktw greenkey-m froris atilathehun easierlikethis arodu pansx ziir kgite underscoredesign shcmattenks anysom mmg5 rvillas courdek dvshsahu netwizards lb-digital vavasin olczak jamaltun eyupaltindal scherler marcosmeli ivansarajcic andresjpvi fishbite leochenftw ievgent manud99 amans199 codertapsu mashirok brodieaustin azevedo ganlanyuan stefan334 nono-ep jondujaka jonatasamaral fishyauri jshakes macx ststeiger

input-range-scss's Issues

Track width webkit/moz inconsistency

I see that this issue is addresed by the following:

&::-moz-range-track {
  height: $track-height / 2;
}

However applying tweaks to the variables reveals that this is not a perfect solution as with different $track-width and $track-border-width values the overall widths of the track diverge. I suggest this works better (instead of the rule above):

&::-moz-range-track {
  box-sizing: border-box;
}

[Question] Rotating the thumb

Hey,
I have some special styling for the thumb, where it needs to be a diamond shaped thumb.

I added a transform: rotate(45deg); to the thumbs, but in IE11 it cuts off the edges.
Do you have an idea how to fix this? Or probably a different solution?

Using "/" in Sass is deprecated; use math.div instead

Hello, according to this using the slash as the division operator is not supposed to be done in Sass anymore and will eventually break, and when I use your package Webpack issues many deprecation warnings about it. Since this is a very straightforward problem, I made the relevant changes to my own fork and will open a pull request for it.

Vertical option

Could you create a cross browser vertical option ?

How to add filled part?

Hello, any ideas on how to add custom filled part in the left part of the slider? like on screenshot has IE in default.

NPM package?

Are there any plans to turn this into a simple npm package? Or it's already there and I'm missing it?

Vertical slider. Track height in percentage.

If you want a slider that is supposed to be displayed vertically you get incompatible units (% and px) if you set the height to 100%.

Question: Sliders of different colors in single page

Hi, is there a way to make the sliders of different colors in the same page?

.sliderblue {
track-color: blue;
}
.slideryellow {
track-color: yellow;
}

does not work independently from adding the @import or @use or inserting the full scss code in the main css file. Adding !global in the class changes the color but also previous ones.

  &:focus {
    outline: 0;
    ...
  }

but I'm still seeing a dotted outline, at least in the latest Firefox.