{"id":21432050,"url":"https://github.com/recidvst/scrub-slider","last_synced_at":"2025-07-14T12:32:44.335Z","repository":{"id":73216966,"uuid":"98353978","full_name":"Recidvst/scrub-slider","owner":"Recidvst","description":"JS library for adding a scrubber-style slider component for images.","archived":false,"fork":false,"pushed_at":"2023-10-29T23:39:26.000Z","size":1595,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-08T10:12:47.864Z","etag":null,"topics":["featured","front-end","javascript","js","npm","scrub","scrub-slider","scrubber","slider","slider-component"],"latest_commit_sha":null,"homepage":"https://recidvst.github.io/scrub-slider/","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/Recidvst.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}},"created_at":"2017-07-25T22:06:52.000Z","updated_at":"2023-12-07T23:59:45.000Z","dependencies_parsed_at":"2023-10-17T05:46:56.193Z","dependency_job_id":"721d714f-3e66-48b8-8890-16fa4bf448e9","html_url":"https://github.com/Recidvst/scrub-slider","commit_stats":{"total_commits":59,"total_committers":1,"mean_commits":59.0,"dds":0.0,"last_synced_commit":"498f7065ed6c6f4cef23b6c2460f660f94698406"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Recidvst%2Fscrub-slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Recidvst%2Fscrub-slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Recidvst%2Fscrub-slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Recidvst%2Fscrub-slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Recidvst","download_url":"https://codeload.github.com/Recidvst/scrub-slider/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225976196,"owners_count":17554197,"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":["featured","front-end","javascript","js","npm","scrub","scrub-slider","scrubber","slider","slider-component"],"created_at":"2024-11-22T23:15:58.722Z","updated_at":"2024-11-22T23:15:59.243Z","avatar_url":"https://github.com/Recidvst.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![npm](https://img.shields.io/npm/dt/scrub-slider.svg)]()\n[![npm](https://img.shields.io/npm/v/scrub-slider.svg)]()\n[![license](https://img.shields.io/github/license/recidvst/scrub-slider.svg)]()\n\n# Scrub Slider\n\nA lightweight javascript library that lets you 'scrub' transition between two images with style.\n\n[Demo Page](https://recidvst.github.io/scrub-slider \"scrub demo\")\n\n## Install\n\n- Install the package from [NPM](https://www.npmjs.com/package/scrub-slider \"npm download\") or [Yarn](https://yarnpkg.com/en/package/scrub-slider \"yarn download\").\n- Or download manually from [Github](https://github.com/Recidvst/scrub-slider/archive/master.zip \"Github download\").\n\n```bash\nnpm install scrub-slider\n```\n\n### JS\n\nEither import the JS as a module:\n\n```js\nimport Scrub from \"scrub-slider\";\n```\n\nOr consume the module as UMD/IIFE\n\n```html\n\u003cscript src=\"./scrub.iife.js\"\u003e\u003c/script\u003e\n```\n\n### CSS\n\nEither import the CSS into your JS/CSS:\n\n```js\nimport \"scrub-slider/dist/scrub.css\";\n```\n\n```scss\n@import \"scrub-slider/dist/scrub.css\";\n```\n\nOr include it the old fashioned way:\n\n```html\n\u003clink href=\"./scrub.css\" rel=\"stylesheet\" /\u003e\n```\n\n## Usage\n\n\u003e Scrub needs to be passed a containing element plus two images to work\n\n- Initiate a Scrub instance by calling Scrub() with a valid selector (of the parent element). This is best as an ID but a unique class is fine too.\n- If you wish to configure your slider, pass Scrub() an object with config options (see below).\n- You have a choice for how you want to pass the two images:\n  - `\u003cimg\u003e` with src properties\n  - `\u003cdiv\u003e` with background-image set on the html\n  - `any tag` (empty), with image specified with the `src` config property\n- Edit the css provided to add your own styling e.g. to the handle\n- The container should have a width.\n\n## Configure\n\nYou can configure your Scrub instance by passing your selector and some config parameters as an object. The available options are as follows:\n\n### `Target`\n\n**Purpose:** This is the item which you wish to become a Scrub slider! Pass the id or unique class of a container element.  \n**Type:** string  \n**Default:** null  \n**Required:** Yes.\n\n### `Height`\n\n**Purpose:** This is the height of your Scrub instance. Defaults to 500px. Specify height in pixels.  \n**Type:** string  \n**Default:** 500px  \n**Required:** No. But recommended.\n\n### `Handle`\n\n**Purpose:** This is the switch for the circular handle control on the slider's dividing line. Set to false to hide. If you want to style this differently, add your own css on '.sliding'.  \n**Type:** bool  \n**Default:** true  \n**Required:** No.\n\n### `Src`\n\n**Purpose:** Alternate method of specifying slider images. Pass an array of two strings containing an img src. Left then right.  \n**Type:** array  \n**Default:** null  \n**Required:** No. As long as the element you want to instantiate as a Scrub slider is an image with valid src property or a div with a valid background-image property.\n\n### `Alt`\n\n**Purpose:** Add an alt tag to the slider. Pass an array of two strings describing each image. Left then right.  \n**Type:** array  \n**Default:** null  \n**Required:** No.\n\n## Example\n\n```js\nScrub({\n  target: \"#slider1\",\n  height: \"500\",\n  handle: true,\n  src: [\n    \"https://raw.github.com/Recidvst/recidvst-images/master/mustang-old-min.jpg\",\n    \"https://raw.github.com/Recidvst/recidvst-images/master/mustang-old-inverted-min.jpg\",\n  ],\n  alt: [\"Image number 1 alt\", \"Image number 2 alt\"],\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frecidvst%2Fscrub-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frecidvst%2Fscrub-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frecidvst%2Fscrub-slider/lists"}