{"id":15379309,"url":"https://github.com/yaireo/ui-range","last_synced_at":"2025-07-12T20:37:24.728Z","repository":{"id":44580617,"uuid":"307418711","full_name":"yairEO/ui-range","owner":"yairEO","description":"Beautiful UI-Range input component, highly customisable, based on CSS variables. including a floating output value, min \u0026 max values on the sides \u0026 ticks according to the steps","archived":false,"fork":false,"pushed_at":"2022-02-07T07:57:39.000Z","size":714,"stargazers_count":112,"open_issues_count":2,"forks_count":11,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-07-03T06:18:45.591Z","etag":null,"topics":["component","input","range","ui","web"],"latest_commit_sha":null,"homepage":"","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/yairEO.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2020-10-26T15:30:53.000Z","updated_at":"2025-05-25T13:24:45.000Z","dependencies_parsed_at":"2022-08-28T18:44:03.271Z","dependency_job_id":null,"html_url":"https://github.com/yairEO/ui-range","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"purl":"pkg:github/yairEO/ui-range","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yairEO%2Fui-range","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yairEO%2Fui-range/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yairEO%2Fui-range/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yairEO%2Fui-range/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yairEO","download_url":"https://codeload.github.com/yairEO/ui-range/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yairEO%2Fui-range/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265049589,"owners_count":23703561,"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":["component","input","range","ui","web"],"created_at":"2024-10-01T14:18:46.494Z","updated_at":"2025-07-12T20:37:24.669Z","avatar_url":"https://github.com/yairEO.png","language":"SCSS","readme":"\u003cp align=\"center\"\u003e\n\u003cbr\u003e\n  \u003ca href='https://codepen.io/vsync/pen/mdEJMLv?editors=1100'\u003e\n    \u003cimg src=\"./screen.png?sanitize=true\" style='max-width: 820px' /\u003e\n  \u003c/a\u003e\n\u003cbr\u003e\n\u003cp\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href='https://www.npmjs.com/package/@yaireo/ui-range'\u003e\n      \u003cimg src=\"https://img.shields.io/npm/v/@yaireo/ui-range.svg\" /\u003e\n  \u003c/a\u003e\n  \u003ca href='https://simple.wikipedia.org/wiki/MIT_License'\u003e\n      \u003cimg src=\"https://img.shields.io/badge/license-MIT-lightgrey\" /\u003e\n  \u003c/a\u003e\n  \u003cimg src=\"https://img.shields.io/bundlephobia/minzip/@yaireo/ui-range\" /\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003e\n  \u003ca href='https://codepen.io/vsync/pen/mdEJMLv'\u003eUI-Range\u003c/a\u003e\n\u003c/h1\u003e\n\u003ch3 align=\"center\"\u003e\u003cem\u003eCSS-Only\u003c/em\u003e Custom \u0026 Flexible\u003cwbr\u003e\u003ccode\u003e\u0026lt;input type='range'\u0026gt; \u003c/code\u003e\u003c/h3\u003e\n\n\u003ch3 align=\"center\"\u003e\n  👉 Demos: \u003ca href='https://codepen.io/vsync/pen/mdEJMLv?editors=1100 target='_blank'\u003eCodepen\u003c/a\u003e 👈\n\u003c/h3\u003e\n\n---\n\nA *CSS-only* component which is designed to work along-side the *corresponding **markup*** (examples below).\nThis code here is designed to bring *customizabiilty* to the **maximum** for the `range` input element,\nextending the **very basic** `\u003cinput type='range'\u003e` native browser component, infusing it with extra features.\n\n\n## Features:\n\n* Extensive [CSS variables](https://github.com/yairEO/ui-range/blob/master/ui-range.scss#L2-L34) usage = *Much easier* customization:\n  * Track height, color, gradient\n  * Progress color/gradient\n  * Progress shadow\n  * Thumb size, color \u0026 shadow\n  * Ticks (per step) height, color, width, position, offset\n  * Ticks count limit (30)\n  * Ticks skipping (Prints tick every *N* tick)\n  * Value text color when \"active\" (component *hover*)\n  * Value background color\n  * Cursor for hover \u0026 grabbing\n  * \u003cdel\u003e*RTL* (right-to-left) support via `dir=rtl` attribute\u003c/del\u003e\n* Value is printed by default at all times\n* Value supports *prefix* and/or *suffix*\n* Minimum \u0026 maximum values are printed at the edges\n* Ticks are printed on each step, or every N step\n* Ticks automatically hidden if too many (too dense to be helpful)\n\nIn addition to all the root variables, a helper variable `--is-left-most` exists on the `\u003cinput\u003e` element itself,\nwhich can be helpful if it is desirable to visually distingush between left/right thumbs of a multi-range slider.\n\n⚠️`--min` \u0026 `--max` variables' values should be kept as *integers* (not *floating-point*) because a [CSS trick](https://stackoverflow.com/a/40179718/104380)\nusing counters is used to print the values in a pseudo-element, and it only works for integers.\n\n---\n\nI must say that CSS is not yet good enough to make this code much cleaner. I had to rely on repeating the input's attributes in its parent node, as CSS style variables, because CSS is currently unable to [extrapolate attibutes as variables](https://github.com/w3c/csswg-drafts/issues/4482).\n\nEven if the above was possible, still, it would require passing varables from one sibling to another, or to a parent.\n\nThe `\u003cinput\u003e` element has all the information needed, but the `oninput` event is needed to keep things in-sync for the CSS to be \"aware\".\n\n`--text-value` is needed along-side `--value` due to CSS inability to cast variables types. Technically\nit is possible with new [Houdini](https://developer.mozilla.org/en-US/docs/Web/Houdini), but it's not yet a norm in modern-browsers.\n\n---\n\nI intentionallyl did not use the native `\u003cprogress\u003e` element, since it wasn't flexible enough (especially not cross-browser). Using `\u003cdiv class='range-slider__progress'\u003e\u003c/div\u003e` instead.\n\n## Install:\n\n```\nnpm i @yaireo/ui-range\n```\n\n## Usage:\n\nImport CSS file via JS\n\n```js\nimport '@yaireo/ui-range'\n```\n\nOr via CSS [`@import`](https://stackoverflow.com/q/10036977/104380)\n\n```css\n@import '@yaireo/ui-range'\n```\n\nFor the SCSS version, use this path:\n\n    @yaireo/ui-range/ui-range.scss\n\n### Markup Example (single range):\n\n```html\n\u003cdiv class=\"range-slider\" style='--min:0; --max:100; --value:75; --text-value:\"75\"; --suffix:\"%\"'\u003e\n  \u003cinput type=\"range\" min=\"0\" max=\"100\" value=\"75\" oninput=\"this.parentNode.style.setProperty('--value',this.value); this.parentNode.style.setProperty('--text-value', JSON.stringify(this.value))\"\u003e\n  \u003coutput\u003e\u003c/output\u003e\n  \u003cdiv class='range-slider__progress'\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Markup Example (double range):\n\n```html\n\u003cdiv class=\"range-slider flat\" data-ticks-position='top' style='--min:-500; --max:500; --prefix:\"$\" --value-a:-220; --value-b:400; --text-value-a:\"-220\"; --text-value-b:\"400\";'\u003e\n  \u003cinput type=\"range\" min=\"-500\" max=\"500\" value=\"-220\" oninput=\"this.parentNode.style.setProperty('--value-a',this.value); this.parentNode.style.setProperty('--text-value-a', JSON.stringify(this.value))\"\u003e\n  \u003coutput\u003e\u003c/output\u003e\n  \u003cinput type=\"range\" min=\"-500\" max=\"500\" value=\"400\" oninput=\"this.parentNode.style.setProperty('--value-b',this.value); this.parentNode.style.setProperty('--text-value-b', JSON.stringify(this.value))\"\u003e\n  \u003coutput\u003e\u003c/output\u003e\n  \u003cdiv class='range-slider__progress'\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n## CSS Variables\n\n| CSS Variable             | Default                 | Description                                                           |\n|--------------------------|-------------------------|-----------------------------------------------------------------------|\n| --thumb-size             | `22px`                  | The thumb arear which is used for grabbing the slider and moving      |\n| --value-active-color     | `white`                 | *value* text color when the slider is active/hovered                  |\n| --value-background       | `transparent`           |                                                                       |\n| --value-background-hover | `--primary-color`       |                                                                       |\n| --primary-color          | `#0366d6`               | The main color of the component                                       |\n| --value-offset-y         | `--ticks-gap`           | Vertical distance of the current numerical value from the slider      |\n| --track-height           | `--thumb-size / 2`      |                                                                       |\n| --progress-radius        | `20px`                  | Border radius of the slider                                           |\n| --fill-color             | `--primary-color`       |                                                                       |\n| --show-min-max           |                         | `none` to hide the *min/max* values at the edges                      |\n| --ticks-thickness        | `1px`                   | How wide each *tick* line is                                          |\n| --ticks-height           | `5px`                   | How tall each *tick* line is                                          |\n| --ticks-gap              | `var(--ticks-height,0)` | Vertical gap between the ticks and the slider                         |\n| --min-max-x-offset       | `10%`                   | Horizontal offset of *min/max* values (more to the inside or outside) |\n| --min-max-opacity        | `0.5`                   |                                                                       |\n| --ticks-color            | `silver`                |                                                                       |\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyaireo%2Fui-range","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyaireo%2Fui-range","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyaireo%2Fui-range/lists"}