{"id":22218578,"url":"https://github.com/megahertz/react-media-slider","last_synced_at":"2025-07-27T14:32:50.237Z","repository":{"id":57334440,"uuid":"67212347","full_name":"megahertz/react-media-slider","owner":"megahertz","description":"React Slider for HTML5 audio and video","archived":false,"fork":false,"pushed_at":"2016-09-19T14:50:15.000Z","size":4940,"stargazers_count":15,"open_issues_count":0,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-16T20:35:28.059Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://megahertz.github.io/react-media-slider/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/megahertz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-09-02T10:04:49.000Z","updated_at":"2023-07-12T14:07:49.000Z","dependencies_parsed_at":"2022-08-31T15:42:06.972Z","dependency_job_id":null,"html_url":"https://github.com/megahertz/react-media-slider","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/megahertz/react-media-slider","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/megahertz%2Freact-media-slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/megahertz%2Freact-media-slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/megahertz%2Freact-media-slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/megahertz%2Freact-media-slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/megahertz","download_url":"https://codeload.github.com/megahertz/react-media-slider/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/megahertz%2Freact-media-slider/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267370652,"owners_count":24076463,"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","status":"online","status_checked_at":"2025-07-27T02:00:11.917Z","response_time":82,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-12-02T22:27:11.177Z","updated_at":"2025-07-27T14:32:49.728Z","avatar_url":"https://github.com/megahertz.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-media-slider\n[![npm version](https://badge.fury.io/js/react-media-slider.svg)](https://badge.fury.io/js/react-media-slider)\n\n[Example](https://github.com/megahertz/react-media-slider/tree/master/example)\n[Demo](https://megahertz.github.io/react-media-slider/)\n\n## Description\n\nReact Slider for HTML5 audio and video. This library contains two\ncomponents: ProgressSlider and VolumeSlider. To create your own player\nyou only need to include these two components and call `media.play()`\nof HTMLAudioElement\n\n\n![Screenshot](https://raw.githubusercontent.com/megahertz/react-media-slider/master/example/screenshot.png)\n\n\n## Installation\n\nInstall with [npm](https://npmjs.org/package/react-media-slider):\n\n    npm install react-media-slider\n\n## Usage\n\n```js\nimport { ProgressSlider, VolumeSlider } from 'react-media-slider';\n\n… \n\nrender() {\n  // Get HTMLAudioElement\n  const { audio } = this.state;\n  return (\n    … \n    \u003cProgressSlider media={audio} /\u003e\n    … \n    \u003cVolumeSlider media={audio} /\u003e\n    … \n  }\n}\n\n```\n\n### Options\n\n - media – HTMLAudioElement. Alternatively, you can \n [set it after render](https://github.com/megahertz/react-media-slider/blob/master/example/player.jsx#L26)\n - style – described below\n - disableHint – disable time / volume hint above a slider\n\n### Styling\nYou can override all attributes using \"style\" attribute. Here is a default value:\n```json\n{\n  \"colors\": {\n    \"background\": \"rgba(0, 0, 0, .05)\",\n    \"progress\": \"rgba(0, 101, 225, .5)\",\n    \"controls\": \"#5796ce\",\n    \"buffered\": \"#ccc\"\n  },\n  \"container\": {\n    \"position\": \"relative\",\n    \"height\": \"10px\",\n    \"padding\": \"4px 0 10px\",\n    \"cursor\": \"pointer\",\n    \"WebkitTouchCallout\": \"none\",\n    \"WebkitUserSelect\": \"none\",\n    \"MozUserSelect\": \"none\",\n    \"MsUserSelect\": \"none\",\n    \"userSelect\": \"none\",\n    \"WebkitTapHighlightColor\": \"transparent\"\n  },\n  \"body\": {\n    \"height\": \"3px\",\n    \"position\": \"relative\",\n    \"background\": \"rgba(0, 0, 0, .05)\"\n  },\n  \"bufferedContainer\": {\n    \"position\": \"absolute\",\n    \"top\": \"0\",\n    \"left\": \"0\",\n    \"bottom\": \"0\",\n    \"right\": \"0\"\n  },\n  \"bufferedFragment\": {\n    \"display\": \"block\",\n    \"position\": \"absolute\",\n    \"height\": \"100%\",\n    \"background\": \"#ccc\"\n  },\n  \"progress\": {\n    \"position\": \"relative\",\n    \"height\": \"100%\",\n    \"background\": \"rgba(0, 101, 225, .5)\"\n  },\n  \"handle\": {\n    \"opacity\": \"0\"\n  },\n  \"handleHovered\": {\n    \"display\": \"block\",\n    \"float\": \"right\",\n    \"width\": \"10px\",\n    \"height\": \"10px\",\n    \"margin\": \"-3px -7px 0 0\",\n    \"borderRadius\": \"100%\",\n    \"opacity\": \"1\",\n    \"transition\": \"opacity .3s\",\n    \"background\": \"#5796ce\"\n  },\n  \"hint\": {\n    \"position\": \"absolute\",\n    \"opacity\": \"0\",\n    \"top\": \"-200px\",\n    \"display\": \"none\"\n  },\n  \"hintHovered\": {\n    \"position\": \"absolute\",\n    \"left\": \"0\",\n    \"top\": \"-28px\",\n    \"marginLeft\": \"2px\",\n    \"padding\": \".2em .3em\",\n    \"transform\": \"translateX(-50%)\",\n    \"color\": \"#fff\",\n    \"borderRadius\": \"2px\",\n    \"fontSize\": \"80%\",\n    \"pointerEvents\": \"none\",\n    \"opacity\": \"1\",\n    \"transition\": \"opacity .3s\",\n    \"background\": \"#5796ce\"\n  },\n  \"hintArrow\": {\n    \"position\": \"absolute\",\n    \"left\": \"50%\",\n    \"bottom\": \"-11px\",\n    \"width\": \"0\",\n    \"height\": \"0\",\n    \"marginLeft\": \"-6px\",\n    \"border\": \"6px solid transparent\",\n    \"borderTopColor\": \"#5796ce\"\n  }\n}\n```\n    \n## License\n\nLicensed under MIT.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmegahertz%2Freact-media-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmegahertz%2Freact-media-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmegahertz%2Freact-media-slider/lists"}