images_viewer/src/components/JumpControls.tsx

import React, {useState, useCallback, useEffect} from 'react'
import {Slider, InputNumber} from 'antd'
import styled from 'styled-components'

const Container = styled.div`
    width: 100%;
    display: inline-flex;
`

const JumpControls = (props: any)=>{
    const {src, currIndex, setBookContextState} = props
    const [inputValue, setInputValue] = useState(currIndex)
    const [sliderValue, setSliderValue] = useState(currIndex)
    const onChange = useCallback(
        (value) => {
            if(value){
                const newCurrIndex = value -1
                if(newCurrIndex < src.length && newCurrIndex >=0){
                    setBookContextState({
                        currIndex: value - 1,
                        flagToReverse: value < inputValue
                    })
                }                
            }  
        },
        [inputValue, src.length, setBookContextState])

    useEffect(()=>{
        setInputValue(currIndex + 1)
    }, [currIndex])

    useEffect(() => {
        setSliderValue(inputValue)
    }, [inputValue])


    const sliderRestProps = ()=>{
        return sliderValue === inputValue? {}: {value: inputValue}
    }

    return <Container>
        <Slider
            style={{
                flexGrow: 1
            }}
            min={1}
            max={src.length}
            onAfterChange={onChange}
            defaultValue={typeof inputValue === 'number' ? inputValue : 1}
            {...sliderRestProps()}
        />
        
        <InputNumber
            min={1}
            max={src.length}
            style={{ margin: '0 8px' }}
            value={inputValue}
            onChange={onChange}
        />
    </Container>
}

export default JumpControls