# <ButtonSliderGroup /> Component

## Description

Renders two buttons and an optional slider

Used for use cases like incrementing/decrementing a property, or setting a precise value (using the slider)

## Checklist

This component should...

- Should render component in the dom
- Should render a _Max Value_ checkbox when the showMaxCheck prop is true
- Should render the _Auto Set_ checkbox when the showAutoCheck prop is set to true
- Slider should be positioned at the value provided in the prop
- Should show a tooltip when the group is hovered over
- Should not show a slider when the showSlider prop is set to false
- Should show a label caption for the group using the text prop
- Should render a button with the value, style, events, icon attributes provided in the button1 prop
- Should render a button with the value, style, events, icon attributes provided in the button2 prop
- Should not allow any values below the provided minValue prop
- Should not allow any values above the provided maxValue prop
- Should set the value to the autoCheckValue prop's value when the _Auto_ checkbox is checked
- Should set the value to the maxCheckValue prop's value when the _Max_ checkbox is checked
- Should immediately uncheck the AutoCheck and MaxCheck checkbox when the button is clicked or slider is changed
- Should automatically check the MaxCheck Checkbox when the slider is at the maximum position
- Should position the value of the slider to the max position if the MaxCheck checkbox is checked
- Should revert the value back to the original value if the _Auto_ checkbox is un-checked
- Component updates should occur immediately, but database persistence should apply on the mouse up event
- Should trigger the onChange() event with the new value when either of the buttons are clicked
- Should trigger the onChange() event with the new value when the slider is moved
- Should trigger the _onButtonSliderGroupRender_ plugin hook when the ButtonSliderGroup component renders
- Should trigger the _onButtonSliderGroupChange_ plugin hook when the value of the ButtonSliderGroup property changes
- Should trigger the onButtonSliderGroupFinish plugin hook when the mouse button is released (on the button or slider)

## Usage

To install it...

> npm install @sandcastle/components

Add it to your project...

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

export default () => (
  <ButtonSliderGroup

  />
)
```

## 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