{"id":17617634,"url":"https://github.com/ximing/react-range-progress","last_synced_at":"2026-01-07T09:43:29.691Z","repository":{"id":82756984,"uuid":"81554391","full_name":"ximing/react-range-progress","owner":"ximing","description":"Eases styling of sliders (range inputs).","archived":false,"fork":false,"pushed_at":"2017-02-10T10:26:26.000Z","size":69,"stargazers_count":0,"open_issues_count":0,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-26T13:06:29.583Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://www.webpackbin.com/V1M4M4ws-","language":"HTML","has_issues":false,"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/ximing.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-02-10T10:25:11.000Z","updated_at":"2021-07-29T00:01:42.000Z","dependencies_parsed_at":null,"dependency_job_id":"c2f3bef0-296a-4073-9624-2de3f0ff56dd","html_url":"https://github.com/ximing/react-range-progress","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ximing%2Freact-range-progress","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ximing%2Freact-range-progress/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ximing%2Freact-range-progress/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ximing%2Freact-range-progress/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ximing","download_url":"https://codeload.github.com/ximing/react-range-progress/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246262492,"owners_count":20749170,"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":[],"created_at":"2024-10-22T19:14:50.675Z","updated_at":"2026-01-07T09:43:29.645Z","avatar_url":"https://github.com/ximing.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"react-range-progress\n=======================\n\n[![Travis](https://img.shields.io/travis/vgrafe/react-range-progress.svg?maxAge=2592000)](https://travis-ci.org/vgrafe/react-range-progress) [![Codecov](https://img.shields.io/codecov/c/github/vgrafe/react-range-progress.svg?maxAge=2592000)](https://codecov.io/gh/vgrafe/react-range-progress) [![npm](https://img.shields.io/npm/dt/react-range-progress.svg?maxAge=2592000)](https://www.npmjs.com/package/react-range-progress)\n\nA visually customizable range input component for react, inspired by [a post on css-tricks](https://css-tricks.com/custom-interactive-range-inputs/).\n\n## Installation\n\n```\nnpm install react-range-progress --save\n```\n\nYou can also import from [npmcdn](https://npmcdn.com/react-range-progress) or [unpkg](https://unpkg.com/react-range-progress).\n\n## Playground\n\nYou can play around with a few properties on [webpackbin](http://www.webpackbin.com/VkXZkAUsW)\n\n## Props\n\n`hideThumb` - Boolean: Set to true to hide the thumb.\n\n---\n\n`height` - number: Track height in pixels.\n\n---\n\n`width` - number or string: Track width. In pixels when numeric, but can be given 'auto', '80%', etc.\n\n---\n\n`thumbSize` - number: Thumb size in pixels.\n\n---\n\n`min` - number: Minimum range value.\n\n---\n\n`max` - number: Maximum range value.\n\n---\n\n`onChange` - function: Callback called when the range value was changed.\n\n---\n\n`value` - number: Initial range value.\n\n---\n\nThe following properties are set with an object with properties r, g, b, a to set red, green, blue (all from 0 to 255) and alpha (0.0 to 1.0) channels. Example for a half opaque\nred color:\n```js\n{\n  r: 255, g: 0, b: 0, a: .5\n}\n```\n\n---\n\n`fillColor` - color shape: Fills the track part on the left of the thumb. Defaults to white.\n\n---\n\n`trackColor` - color shape: Color of the 'empty' part of the track. Defaults to white with 50% opacity.\n\n---\n`readOnly` - bool: self explanatory.\n\n---\n\n`thumbColor` - color shape: Thumb color. Defaults to white.\n\n\n### Run the tests\n\n```\nnpm test\n```\n\n### License\n\nMIT. Copyright (c) 2016 Vincent Grafé.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fximing%2Freact-range-progress","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fximing%2Freact-range-progress","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fximing%2Freact-range-progress/lists"}