{"id":18439787,"url":"https://github.com/darlanrod/input-range-scss","last_synced_at":"2025-05-16T08:05:49.752Z","repository":{"id":44733825,"uuid":"49034096","full_name":"darlanrod/input-range-scss","owner":"darlanrod","description":"Styling Cross-Browser Compatible Range Inputs with Sass","archived":false,"fork":false,"pushed_at":"2023-09-05T15:11:04.000Z","size":64,"stargazers_count":325,"open_issues_count":2,"forks_count":90,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-05-08T13:45:14.067Z","etag":null,"topics":["cross-browser","design","form","front-end","input","npm","npm-package","range","sass","scss","style"],"latest_commit_sha":null,"homepage":null,"language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/darlanrod.png","metadata":{"files":{"readme":"README.md","changelog":"changelog.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2016-01-05T01:32:14.000Z","updated_at":"2025-03-27T11:13:05.000Z","dependencies_parsed_at":"2022-08-20T12:31:48.157Z","dependency_job_id":"c6309a32-a455-44af-84ad-a6677016c245","html_url":"https://github.com/darlanrod/input-range-scss","commit_stats":{"total_commits":35,"total_committers":14,"mean_commits":2.5,"dds":0.5714285714285714,"last_synced_commit":"371014f5b8485d4e497639263e8bec1ace83aa2f"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darlanrod%2Finput-range-scss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darlanrod%2Finput-range-scss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darlanrod%2Finput-range-scss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darlanrod%2Finput-range-scss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/darlanrod","download_url":"https://codeload.github.com/darlanrod/input-range-scss/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254493378,"owners_count":22080126,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cross-browser","design","form","front-end","input","npm","npm-package","range","sass","scss","style"],"created_at":"2024-11-06T06:26:35.121Z","updated_at":"2025-05-16T08:05:44.744Z","avatar_url":"https://github.com/darlanrod.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Styling Cross-Browser Compatible Range Inputs with Sass / SCSS\n\nSass component for customizing the input range using the native properties of each browser. Based on article [Styling Cross-Browser Compatible Range Inputs with CSS](https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/) from CSS Tricks blog.\n\n## NPM Package\n```\nnpm i input-range-scss\n```\n## Features\n\n-   Variables for easy customization\n-   Uses the native properties of each browser\n-   Preserves accessibility\n-   Cross-browser compatible\n\n## Example\n\n![Input range native and custom on browsers](https://github.com/darlanrod/input-range-scss/raw/master/example/input-range-browsers.jpg)\n\n## Usage\n\nTo use this library in your stylesheets, import it as a Sass module:\n\n```\n@use 'input-range-scss';\n```\nTo override the default styling, use the `with` keyword along with any variables you would like to override, for example:\n\n```\n@use 'input-range-scss' with (\n  $track-color: red,\n  $thumb-color: blue,\n  $thumb-height: 2em,\n  $thumb-width: 2em,\n);\n```\n\nFor a complete list of variables see https://github.com/darlanrod/input-range-scss/blob/master/_inputrange.scss#L9.\n\nNB. including the module will apply styles all elements matching the CSS selector `[type='range']`.\n\n## Changelog\n\nTo see the change history of this project, check out the `changelog.md` file.\n\n## See Also\n\n[Input range browser support](http://caniuse.com/#feat=input-range)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdarlanrod%2Finput-range-scss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdarlanrod%2Finput-range-scss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdarlanrod%2Finput-range-scss/lists"}