FormikSlider

Basic Usage


import { FormikSlider } from '@krakentech/coral-formik';
import { Button } from '@krakentech/coral';
import { Formik, Form } from 'formik';
 
<Formik
    initialValues={{ slider: 100 }}
    onSubmit={() => console.log('Submitted')}
    validationSchema={yup.object().shape({
        slider: yup
            .number()
            .required('This field is required')
            .min(150, 'Please choose a value of at least 150'),
    })}
>
    <Form method="post">
        <FormikSlider name="slider" label="Select value" min={69} max={420} />
        <Button type="submit">Submit</Button>
    </Form>
</Formik>

Full API

Name	Type	Default
`ariaLabel`	`string` The aria-label of the slider thumb.	`Slider control`
`disabled`	`boolean` If `true`, the component will be disabled and not respond to user interactions.	`false`
`getAriaValueText`	`(value: number) => string` Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider. This is important for screen reader users.
`isAnimated`	`boolean` If `true`, the slider will animate its value changes.	`true`
`label`	`string` The accessible label for the slider.
`max`	`number` The maximum allowed value of the slider. This should not be equal to min.	`100`
`min`	`number` The minimum allowed value of the slider. This should not be equal to max.	`0`
`name`	`string` Name attribute of the hidden `input` element.
`onBlur`	`FocusEventHandler<HTMLDivElement>` Callback fired when the slider loses user focus.
`onChange`	`SliderChangeHandler` Callback fired each time the user changes the slider value. `newValue` The new value of the slider. `event` The event source of the callback.
`optional`	`boolean` Add an optional flag to the label for this field (controlled by https://coral-oe.vercel.app/?path=/docs/guides-configuration—docs#overrides-optional-indicator optionalIndicator). This should be set to true if you have set this field to be optional in your validation schema.	`false`
`showLabels`	`boolean` Display the field label, including the currently-selected value.	`true`
`step`	`number` The granularity with which the slider can step through values. (A “discrete” slider.) The min prop serves as the origin for the valid values. We recommend (max - min) to be evenly divisible by the step.	`1`
`valueLabelDisplay`	`SliderValueLabelDisplay` Controls when the value label is displayed: `auto` the value label will display when the thumb is hovered or focused. `on` will display persistently. `off` will never display.	`auto`
`valueLabelFormat`	`(value: number) => string` A function that formats the value label. This is useful for displaying currency, percentages, etc.
`validate`	`FieldValidator \| undefined` An optional field level validation function. See Formik docs for more details