CODEWITHSUNDEEP
reactjstypescript
Ameer Hamza
Ameer Hamza

Reputation: 407

React Chakra-UI slider returns undefined onChange

I am trying to use Slider from Chakra-UI in react typescript project. But when I slide the Slider the onChange trigger returns undefined instead of Number value.

I am pretty sure that I'm missing something because this is my first experience with typescript.

import React, { useState } from 'react'
import { Select, FormControl, FormLabel, Slider, SliderThumb, SliderFilledTrack, Stack, Button } from "@chakra-ui/core";


const MainPage: React.FC = () => {
    const [questionsCount, setQuestionsCount] = useState<number>(10);
    return (
        <div>
           <Slider flex="1" value={questionsCount} min={1} max={50} onChange={(value: number): void => { console.log(value) }}>
              <SliderFilledTrack />
              <SliderThumb
                fontSize="sm"
                width="32px"
                height="20px"
                children={questionsCount}
                />
            </Slider>
          </div >
    )
}

export default MainPage

Upvotes: 0

Views: 1678

Answers (1)

Prateek Thapa
Prateek Thapa

Reputation: 4938

You're missing SliderTrack as it is one of 4 components required for Slider.

You could check the docs here

<Slider flex="1" value={questionsCount} min={1} max={50} onChange={(value: number): void => { console.log(value) }}>
  <SliderTrack />
  <SliderFilledTrack />
  <SliderThumb
     fontSize="sm"
     width="32px"
     height="20px"
     children={questionsCount}
   />
</Slider>

Upvotes: 1

Related Questions