1.0.2 • Published 1 year ago
sb-framer-stepper v1.0.2
📖 Table of Contents
🚀 Getting Started
🐇 Jump Start
npm i sb-framer-stepper
import { useState } from "react";
import { FramerStepper } from "sb-framer-stepper";
function Example() {
const [value, setValue] = useState(10);
return (
<NumericStepper
minimumValue={10}
maximumValue={100}
stepValue={10}
initialValue={INITIAL_VALUE}
size="md"
inactiveTrackColor="#fed7aa"
activeTrackColor="#fddec0"
activeButtonColor="#ffedd5"
inactiveIconColor="#fb923c"
hoverIconColor="#ea580c"
activeIconColor="#9a3412"
disabledIconColor="#fdba74"
thumbColor="#f97316"
thumbShadowAnimationOnTrackHoverEnabled={false}
focusRingColor="#fff7ed"
onChange={(value) => {
setValue(value);
}}
/>
);
}
💻 Live Demo
⚙️ Configuration
NumericStepper
supports the following props:
Prop | Type | Default value | Description |
---|---|---|---|
minimumValue | number | 0 | The minimum value. |
maximumValue | number | Number.MAX_SAFE_INTEGER | The maximum value. |
stepValue | number | 1 | The step increment value. |
initialValue | number | minimumValue | The initial value. |
onChange | Function | undefined | The callback invoked when the value changes. |
size | string | sm | The size of the numeric stepper. There are 4 available sizes:xs — 92.5x37pxsm — 185x74pxmd — 277.5x111pxlg — 370x148px |
inactiveTrackColor | string | #2b2b2b | The color of the track while the thumb is not being horizontally dragged. |
activeTrackColor | string | #1f1f1f | The color of the track while the thumb is being horizontally dragged and is at the maximum trackable distance from the track's center. |
hoverButtonColor | string | transparent | The color of the decrement/increment button in a hover state. |
activeButtonColor | string | #ececec | The color of the decrement/increment button in an active state. |
inactiveIconColor | string | #858585 | The color of the decrement/increment button icon in an inactive state. |
hoverIconColor | string | #ffffff | The color of the decrement/increment button icon in a hover state. |
activeIconColor | string | #000000 | The color of the decrement/increment button icon in an active state. |
disabledIconColor | string | #383838 | The color of the decrement/increment button icon in a disabled state. |
thumbColor | string | #444444 | The color of the thumb. |
thumbLabelColor | string | #ffffff | The color of the thumb's label. |
thumbShadowAnimationOnTrackHoverEnabled | boolean | true | If true , the thumb's shadow will animate when hovering over the track. |
focusRingColor | string | #ececec | The color of the focus ring of the interactive elements. |
In order to customise the thumb's font settings, we can use CSS, like so:
[data-testid="framer-stepper-thumb"] {
font-family: "Times New Roman", Times, serif;
font-style: italic;
font-weight: 800;
}
♿️ Accessibility
In order to comply with the web accessibility standards, we must make use of the decrementButtonAriaLabel
and incrementButtonAriaLabel
props, like so:
function AccessibleExample() {
return <FramerStepper decrementButtonAriaLabel="Decrement" incrementButtonAriaLabel="Increment" />;
}
Also, we can use a thumbAriaLabel
prop to provide a description for the value rendered inside a thumb, like so:
function EnhancedThumbAccessibilityExample() {
const [value, setValue] = useState(0);
return (
<FramerStepper
thumbAriaLabel={`${value} items`}
onChange={(value) => {
setValue(value);
}}
/>
);
}