WAR-19: Add range slider component to library.

packages/warpspeed/src/components/index.ts

@@ -24,6 +24,7 @@ export { default as Modal } from './modal';
 export { default as Pagination } from './pagination';
 export { default as ProcessList } from './process-list';
 export { default as RadioButton } from './radio-button';
+export { default as RangeSlider } from './range-slider';
 export { default as Search } from './search';
 export { default as SiteAlert } from './site-alert';
 export { default as StepIndicator } from './step-indicator';

packages/warpspeed/src/components/range-slider/index.ts

@@ -0,0 +1 @@
+export { default } from './range-slider';

packages/warpspeed/src/components/range-slider/range-slider.stories.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { RangeSlider, RangeSliderProps } from './range-slider';
+
+const meta: Meta<typeof RangeSlider> = {
+  title: 'USWDS/Forms/Range Slider',
+  component: RangeSlider,
+  argTypes: {
+    id: { required: true },
+    name: { required: true },
+  },
+};
+export default meta;
+
+const Template: StoryFn<typeof RangeSlider> = (args: RangeSliderProps) => (
+  <div className="usa-form-group">
+    <label className="usa-label" htmlFor={args.id}>
+      Range Slider
+    </label>
+    <RangeSlider
+      id={args.id}
+      name={args.name}
+      defaultValue={args.defaultValue}
+      minValue={args.minValue}
+      maxValue={args.maxValue}
+      step={args.step}
+    />
+  </div>
+);
+
+export const Standard = Template.bind({});
+Standard.args = {
+  id: 'range-slider-1',
+  name: 'range-slider-1',
+  minValue: '0',
+  maxValue: '100',
+  step: '10',
+};
+
+export const DefaultValue = Template.bind({});
+DefaultValue.args = {
+  id: 'range-slider-2',
+  name: 'range-slider-2',
+  minValue: '0',
+  maxValue: '100',
+  step: '5',
+  defaultValue: '20',
+};

packages/warpspeed/src/components/range-slider/range-slider.test.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import RangeSlider from './range-slider';
+
+describe('Range slider', () => {
+  const defaultId = 'range-slider';
+
+  it('should render a range slider successfully', () => {
+    const { baseElement } = render(<RangeSlider id={defaultId} name={defaultId} />);
+    expect(baseElement).toBeTruthy();
+    expect(baseElement.querySelector('.usa-range')).toBeTruthy();
+  });
+
+  it('should render a range slider with min, max, and step successfully', () => {
+    const { baseElement } = render(
+      <RangeSlider id={defaultId} name={defaultId} minValue="0" maxValue="100" step="10" />,
+    );
+    expect(baseElement).toBeTruthy();
+    expect(baseElement.querySelector('#range-slider')?.getAttribute('min')).toEqual('0');
+    expect(baseElement.querySelector('#range-slider')?.getAttribute('max')).toEqual('100');
+  });
+
+  it('should render a range slider with a default value', () => {
+    const { baseElement } = render(
+      <RangeSlider id={defaultId} name={defaultId} defaultValue="20" />,
+    );
+    expect(baseElement).toBeTruthy();
+    expect(baseElement.querySelector('#range-slider')?.getAttribute('value')).toEqual('20');
+  });
+
+  it('should change the value of the slider', () => {
+    const spy = jest.fn();
+    const { baseElement } = render(
+      <RangeSlider id={defaultId} name={defaultId} defaultValue="20" onChange={spy} />,
+    );
+
+    const input = baseElement.querySelector('#range-slider') as HTMLInputElement;
+    fireEvent.change(input, { target: { value: '30' } });
+    expect(baseElement).toBeTruthy();
+    expect(spy).toHaveBeenCalled();
+  });
+});

packages/warpspeed/src/components/range-slider/range-slider.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+
+export interface RangeSliderProps {
+  /**
+   * The unique identifier for the input field
+   */
+  id: string;
+  /**
+   * The name of the input field
+   */
+  name: string;
+  /**
+   * A minimum value allowed for the slider
+   */
+  minValue?: string;
+  /**
+   * A maximum value allowed for the slider
+   */
+  maxValue?: string;
+  /**
+   * The value to increment the slider by as it is changed
+   */
+  step?: string;
+  /**
+   * The default value to apply to the range slider
+   */
+  defaultValue?: string;
+  /**
+   * Event handler will be triggered when the range slider value changes
+   */
+  onChange?: (this: HTMLInputElement, event: Event) => void;
+}
+
+/**
+ * A range slider allows users to choose an approximate number from a range.
+ */
+export const RangeSlider = ({
+  id,
+  minValue,
+  maxValue,
+  step = '10',
+  defaultValue,
+  onChange,
+  ...inputProps
+}: RangeSliderProps & Omit<JSX.IntrinsicElements['input'], 'min' | 'max'>): React.ReactElement => {
+  return (
+    <input
+      id={id}
+      className="usa-range"
+      type="range"
+      min={minValue}
+      max={maxValue}
+      step={step}
+      defaultValue={defaultValue}
+      onChange={onChange}
+      role="slider"
+      {...inputProps}
+    />
+  );
+};
+
+export default RangeSlider;