{"id":19860614,"url":"https://github.com/samuelcarreira/webkit-input-range-fill-lower","last_synced_at":"2025-05-02T04:30:24.190Z","repository":{"id":20192853,"uuid":"89112720","full_name":"samuelcarreira/webkit-input-range-fill-lower","owner":"samuelcarreira","description":"Customize/styles the native HTML input range controls like the ::-ms-fill-lower property on IE - Pure JS","archived":false,"fork":false,"pushed_at":"2023-01-06T04:38:17.000Z","size":1996,"stargazers_count":19,"open_issues_count":12,"forks_count":8,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-06T22:11:30.390Z","etag":null,"topics":["chrome","controller","css","electron","html5","javascript","range-controls","webkit","webkit-browsers"],"latest_commit_sha":null,"homepage":"https://samuelcarreira.github.io/webkit-input-range-fill-lower","language":"HTML","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/samuelcarreira.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}},"created_at":"2017-04-23T02:40:05.000Z","updated_at":"2024-05-27T16:46:27.000Z","dependencies_parsed_at":"2023-01-11T20:45:18.735Z","dependency_job_id":null,"html_url":"https://github.com/samuelcarreira/webkit-input-range-fill-lower","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samuelcarreira%2Fwebkit-input-range-fill-lower","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samuelcarreira%2Fwebkit-input-range-fill-lower/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samuelcarreira%2Fwebkit-input-range-fill-lower/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samuelcarreira%2Fwebkit-input-range-fill-lower/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/samuelcarreira","download_url":"https://codeload.github.com/samuelcarreira/webkit-input-range-fill-lower/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251986609,"owners_count":21675950,"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":["chrome","controller","css","electron","html5","javascript","range-controls","webkit","webkit-browsers"],"created_at":"2024-11-12T15:06:28.507Z","updated_at":"2025-05-02T04:30:22.992Z","avatar_url":"https://github.com/samuelcarreira.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WebKit Input Range Fill Lower Hack\n\nCustomize the native input range controls like the ```::-ms-fill-lower``` property on WebKit browsers\n\n[![License](http://img.shields.io/:license-mit-blue.svg?style=flat-square)](http://badges.mit-license.org)\n\n![Screenshot](samples.png)\n\n## New Version 3.x Notice\nBecause of the increasing interest in this \"library\", I decided to completely rewrite it.\n\n**WARNING**: the old version isn't compatible with this one. If you want to use the older version you can download it from [here]()\n\n\n## Key Features\n* **Uses native HTML input range type (more accessibility, native behavior)**\n* **Doesn't require anymore the external CSS** *new version*\n* **Multiple elements** *new version*\n* **Customizable styles (solid color or gradient)** *new version*\n* **Written in TypeScript** *new version*\n* **Pure / vanilla JavaScript (no jQuery)**\n* **Lightweight** *(3.6kB minified ~1.3kB gzipped)*\n\nView the sample page: https://samuelcarreira.github.io/webkit-input-range-fill-lower\n\n## Quick Usage\nYou only need to follow 4 simple steps to start using this module:\n\n1. Download the script file from the [dist](dist) folder or [releases](https://github.com/samuelcarreira/webkit-input-range-fill-lower/releases) (minified file: `webkit-input-range-fill-lower.min.js`)\n2. Add the input range controls on your web page. **Each control needs a unique ID and the max value**\n  ```\n  // valid\n  \u003cinput type=\"range\" min=\"0\" max=\"10\" value=\"10\" id=\"your-custom-id\"\u003e\n  \n  // invalid: no ID\n  \u003cinput type=\"range\" min=\"0\" max=\"10\" value=\"10\"\u003e\n\n  // invalid: no max value\n  \u003cinput type=\"range\" id=\"your-custom-id\"\u003e\n  ```\n3. Call the library after the page is loaded\n  ```\n  document.addEventListener('DOMContentLoaded', () =\u003e {\n    const myRanges = new WebkitInputRangeFillLower({selectors: ['your-custom-id', 'your-custom-id2'], angle: 90, gradient: 'rgba(238,174,202,1) 0%, rgba(198,180,216,1) 74%, rgba(148,187,233,1) 100%'});\n  });\n  ```\n4. (Optional) You can customize the input element on the page stylesheet. View the `index.html` or the [sample page](https://samuelcarreira.github.io/webkit-input-range-fill-lower) source code to learn more\n\n### WebkitInputRangeFillLower(options)\n\n### Class options\nProperty         | Type     | Required    | Description\n---------------- | -------- | ---------- | ----------------------\n`selectors`  | `string[]` | yes     | List of HTML ID attributes. If you want to select multiple selectors use an array like `['your-custom-id', 'your-custom-id2']`, single selector can be defined with a simple string `selectors: 'your-custom-id'`\n`angle`  \t | `number` | no   | Gradient angle (0-360 degrees). Default value: 90 (only in gradient color)\n`color`  \t | `string` | no | CSS solid color. With can use any CSS color format: hexadecimal, description, rgb or rgba\n`gradient`  \t | `string` | no   | CSS gradient color definition. The default value is the gradient `#0ABFBC, #FC354C`. You can set the position of the color on the gradient like `rgba(238,174,202,1) 0%, rgba(198,180,216,1) 74%, rgba(148,187,233,1) 100%`\n\n## Compatibility\nAs the name indicates, this \"library\" was written to be compatible with the WebKit engine browsers (Google Chrome, Opera, New Microsoft Edge, etc.).\nOn Mozilla Firefox you cannot expect the same results even with the `-moz-range-progress` added (read more [here](https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-range-progress) )\n\n![compatibility](compatibility.png)\n\n\n## Motivation and history\nI've created this \"hack\" because I wanted to use a range slider on my Electron App (a music player with volume control). After I tried some plugins like the [rangeslider.js](http://rangeslider.js.org/) I decided to write something more lightweight and more easy to use.\nAs Electron apps use Chrome (WebKit) as the render engine, ~~I didn't add any compatibility with other browsers/fallbacks to older versions~~ (on the new 3.0 version I've added the Mozilla firefox and Microsoft Internet Explorer 'fallback' property).\n\n## How this 'hack' works\nThis 'hack' uses the `::-webkit-slider-runnable-track` CSS pseudo-element (which represents the \"track\" or the groove in which the indicator slides of an input type=\"range\"). Because you cannot access this property directly on an inline CSS style, this library needs to write a custom style tag directly on the page header where it's set the custom styles and the background style.\nBecause you can \"set the size\" of the background (when you use a linear gradient), this 'library' calculates the percentage of the value on the input range element and adjusts the size of the background to that percentage. Each time the input range value is changed, the event listener updates the background-size.\n\n\n## Credits\n- Developed by: Samuel Carreira\n- Inspired on this article: http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html\n\n## License\n- **[MIT license](http://opensource.org/licenses/mit-license.php)**\n- Copyright 2020 © \u003ca href=\"http://samuelcarreira.com\" target=\"_blank\"\u003eSamuel Carreira\u003c/a\u003e.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamuelcarreira%2Fwebkit-input-range-fill-lower","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsamuelcarreira%2Fwebkit-input-range-fill-lower","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamuelcarreira%2Fwebkit-input-range-fill-lower/lists"}