darlanrod / input-range-scss Goto Github PK
View Code? Open in Web Editor NEWStyling Cross-Browser Compatible Range Inputs with Sass
License: MIT License
Styling Cross-Browser Compatible Range Inputs with Sass
License: MIT License
Could you create a cross browser vertical option ?
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;
}
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%.
Hello, any ideas on how to add custom filled part in the left part of the slider? like on screenshot has IE in default.
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.
Styling sliders is easy, as long as they are not vertical.
Unfortunately, I need vertical sliders to implement virtual scrolling.
Your repo does what's easy, but not what's hard.
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.
cursor:pointer;
should be reserved for links and link-like elements only. As module can be seen as an implementation of best practices, I would recommend to switch to cursor:default
, which would be the most appropriate choice.
I can provide a PR, but I'm about to leave the office right now, will check this issue later.
Are there any plans to turn this into a simple npm package? Or it's already there and I'm missing it?
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.