JS library for adding a scrubber-style slider component for images.
A lightweight javascript library that lets you ‘scrub’ transition between two images with style.
npm install scrub-slider
Either import the JS as a module:
import Scrub from "scrub-slider";
Or consume the module as UMD/IIFE
<script src="./scrub.iife.js"></script>
Either import the CSS into your JS/CSS:
import "scrub-slider/dist/scrub.css";
@import "scrub-slider/dist/scrub.css";
Or include it the old fashioned way:
<link href="./scrub.css" rel="stylesheet" />
Scrub needs to be passed a containing element plus two images to work
<img>
with src properties<div>
with background-image set on the htmlany tag
(empty), with image specified with the src
config propertyYou can configure your Scrub instance by passing your selector and some config parameters as an object. The available options are as follows:
Target
Purpose: This is the item which you wish to become a Scrub slider! Pass the id or unique class of a container element.
Type: string
Default: null
Required: Yes.
Height
Purpose: This is the height of your Scrub instance. Defaults to 500px. Specify height in pixels.
Type: string
Default: 500px
Required: No. But recommended.
Handle
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’.
Type: bool
Default: true
Required: No.
Src
Purpose: Alternate method of specifying slider images. Pass an array of two strings containing an img src. Left then right.
Type: array
Default: null
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.
Alt
Purpose: Add an alt tag to the slider. Pass an array of two strings describing each image. Left then right.
Type: array
Default: null
Required: No.
Scrub({
target: "#slider1",
height: "500",
handle: true,
src: [
"https://raw.github.com/Recidvst/recidvst-images/master/mustang-old-min.jpg",
"https://raw.github.com/Recidvst/recidvst-images/master/mustang-old-inverted-min.jpg",
],
alt: ["Image number 1 alt", "Image number 2 alt"],
});