Formik: Example for: Formik Form w/ Material UI [as={Slider}]

[Connotating]

❓Question

Hello Formik Team,
Is there a proper example for Slider fields like there are for [as={TextField}]?

I see it works for Material-UI Text fields, will the following be acceptable?

 <div className="form-group col">
                    <label htmlFor="Test">TestSlider</label>
                    <Field name="Test" label="Inflation" as={Slider}/>
                    <ErrorMessage name="Test" component="div" className="invalid-feedback" />
                </div>

[felixpk]

EDIT:

So I found a solution:

My _MaterialSlider.js_ looks like this now:

import React from 'react'
import { useField } from 'formik'
import { Slider, Typography } from '@material-ui/core'

export const MaterialSlider = ({ label, ...props }) => {
    const [field, meta, helpers] = useField(props)

    return (
        <React.Fragment>
            <Typography id={field.id} gutterBottom>{label}</Typography>
            <Slider
                {...field}
                {...props}
                aria-labelledby={field.id}
                onBlur={(e) => helpers.setTouched(e)}
                onChange={(e, v) => helpers.setValue(v)}
            />
        </React.Fragment>
    )
}

The only warning left is:

Slider.js:767 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

Any ideas on how to remove this warning? Can I ignore it?

ORIGINAL:

Unfortunately this is not an answer, but I am going to extend this question since it isn't working for me either.

_MaterialSlider.js_

import React from 'react';
import { useField } from 'formik';
import { Slider } from '@material-ui/core';

export const MaterialSlider = ({ label, ...props }) => {
    const [field, meta] = useField(props);

    return (
        <Slider
            {...field}
            {...props}
        />
    );
};

_And the Formik part_

...

<Formik
    initialValues={formData}
    onSubmit={values => {
        console.log(JSON.stringify(values, null, 4))
    }}
    validationSchema={validationSchema}
>
    <Form className={classes.form}>

        <MaterialSlider
            id='exampleSlider'
            name='exampleSlider'
            valueLabelDisplay="auto"
            min={0}
            max={100}
        />

        <Button
            type='submit'
            variant='contained'
            color='primary'
            className={classes.button}
        >
            Continue
        </Button>
    </Form>
</Formik>

...

Then if I try to drag the slider I get the following errors:

_Error 1_

Warning: Received NaN for the `children` attribute. If this is expected, cast the value to a string.
    in span (created by ValueLabel)
    in span (created by ValueLabel)
    in span (created by ValueLabel)
    in span (created by ForwardRef(Slider))
    in ValueLabel (created by WithStyles(ValueLabel))
    in WithStyles(ValueLabel) (created by ForwardRef(Slider))
    in span (created by ForwardRef(Slider))
    in ForwardRef(Slider) (created by WithStyles(ForwardRef(Slider)))
    in WithStyles(ForwardRef(Slider)) (at MaterialSlider.js:9)
    in MaterialSlider (at RegisterStep.js:56)
    in form (created by Form)
    in Form (at RegisterStep.js:54)
    in Formik (at RegisterStep.js:45)
    in RegisterStep (at Register.js:51)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (at Register.js:73)
    in div (created by ForwardRef(Container))
    in ForwardRef(Container) (created by WithStyles(ForwardRef(Container)))
    in WithStyles(ForwardRef(Container)) (at Register.js:72)
    in div (created by Styled(MuiBox))
    in Styled(MuiBox) (at Background.js:23)
    in Background (at Register.js:71)
    in Register (at App.js:52)
    in Route (at App.js:51)
    in Switch (at App.js:46)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:40)
    in App (at src/index.js:22)
    in ThemeProvider (at src/index.js:22)

_Error 2_

index.js:1 Material-UI: A component is changing a controlled Slider to be uncontrolled.
Elements should not switch from uncontrolled to controlled (or vice versa).
Decide between using a controlled or uncontrolled Slider element for the lifetime of the component.
More info: https://fb.me/react-controlled-components 
    in Slider (created by WithStyles(ForwardRef(Slider)))
    in WithStyles(ForwardRef(Slider)) (at MaterialSlider.js:9)
    in MaterialSlider (at RegisterRightholderStepOne.js:56)
    in RegisterStep (at RegisterSponsor.js:51)
    in Register (at App.js:52)
    in App (at src/​index.js:22)

_Warning 1_

react_devtools_backend.js:6 Warning: Formik called `handleBlur`, but you forgot to pass an `id` or `name` attribute to your input:
    <span class="MuiSlider-thumb MuiSlider-thumbColorPrimary PrivateValueLabel-open-315 PrivateValueLabel-thumb-314" tabindex="0" role="slider" data-index="0" aria-orientation="horizontal" aria-valuemax="100" aria-valuemin="0" aria-valuenow="NaN" style="left: 50%;"><span class="PrivateValueLabel-offset-316 MuiSlider-valueLabel"><span class="PrivateValueLabel-circle-317"><span class="PrivateValueLabel-label-318">NaN</span></span></span></span>
    Formik cannot determine which value to update. For more info see https://github.com/jaredpalmer/formik#handleblur-e-any--void

Any help is appreciated