# <LinearScaleField /> Component

## Description

shows a list of numbered options

## Checklist

This component should...

- (Rendering) Should render in the dom
- (Rendering) Should render an EDITOR or LIVE version of the component based on the value of the mode prop
- (Rendering) Should render a regular date picker input field when the mode is live
- (Rendering) Should render the AttributeContainer component when the mode is edit
- (Rendering) Should see that the <Label /> component has been rendered in the dom
- (Rendering) Should see that the <Description /> component component has been rendered if the "hide" value is false
- (Rendering) Should see an option for selecting minimum and maximum range of numbers (e.g. 1 to 5) displayed in the dom
- (Rendering) Should see an option to set the content for the first and last label
- (Rendering) Should see an option for showing the component using radio buttons or a slider
- (Rendering) Should see that the <Required /> component has been rendered in the dom
- (Rendering) Should only see that the <Validation /> component has been rendered if the "hide" value is false
- (Events) Should trigger the onChange event (via handleChange()) if the AttributeContainer's onChange event is called
- (Events) Should trigger the onChange event if the "radio or slider" option is changed (live and edit mode)
- (Events) Should trigger the onChange event (with appropriate payload) if the "min/max" option is changed (live and edit mode)
- (Events) Should trigger the onChange event (with appropriate payload) if the first or last label caption is changed
- (Actions) handleChange should convert the incoming payload to LiveFormFieldProps
- (Actions) Should render radio buttons or slider buttons when selected

## Usage

To install it...

> npm install @sandcastle/components

Add it to your project...

```
import * as React from 'react'
import * as LinearScaleField from '@sandcastle/components/LinearScaleField`

export default () => (
  <LinearScaleField

  />
)
```

## Best Practices

To do: Add any Best Practices here

## Lifecycle Hooks

To do: Add any Lifecycle Hooks here

## Related Components

To do: Add any Related Components here