@@ -9,12 +9,12 @@ const style: React.CSSProperties = {
99} ;
1010
1111const BasicDisabledHandle = ( ) => {
12- const [ value , setValue ] = useState ( [ 0 , 30 , 60 , 100 ] ) ;
12+ const [ value , setValue ] = useState < number [ ] > ( [ 0 , 30 , 60 , 100 ] ) ;
1313 const [ disabled , setDisabled ] = useState ( [ true , false , false , true ] ) ;
1414
1515 return (
1616 < div >
17- < Slider range value = { value } onChange = { setValue } disabled = { disabled } />
17+ < Slider range value = { value } onChange = { ( v ) => setValue ( v as number [ ] ) } disabled = { disabled } />
1818 < div style = { { marginTop : 16 } } >
1919 { value . map ( ( val , index ) => (
2020 < label key = { index } style = { { marginRight : 16 } } >
@@ -36,11 +36,11 @@ const BasicDisabledHandle = () => {
3636} ;
3737
3838const DisabledHandleAsBoundary = ( ) => {
39- const [ value , setValue ] = useState ( [ 10 , 50 , 90 ] ) ;
39+ const [ value , setValue ] = useState < number [ ] > ( [ 10 , 50 , 90 ] ) ;
4040
4141 return (
4242 < div >
43- < Slider range value = { value } onChange = { setValue } disabled = { [ false , true , false ] } />
43+ < Slider range value = { value } onChange = { ( v ) => setValue ( v as number [ ] ) } disabled = { [ false , true , false ] } />
4444 < p style = { { marginTop : 8 , color : '#999' } } >
4545 Middle handle (50) is disabled and acts as a boundary.
4646 First handle cannot go beyond 50, third handle cannot go below 50.
@@ -51,11 +51,11 @@ const DisabledHandleAsBoundary = () => {
5151} ;
5252
5353const MultipleDisabledBoundaries = ( ) => {
54- const [ value , setValue ] = useState ( [ 10 , 30 , 50 , 70 , 90 ] ) ;
54+ const [ value , setValue ] = useState < number [ ] > ( [ 10 , 30 , 50 , 70 , 90 ] ) ;
5555
5656 return (
5757 < div >
58- < Slider range value = { value } onChange = { setValue } disabled = { [ true , false , true , false , true ] } />
58+ < Slider range value = { value } onChange = { ( v ) => setValue ( v as number [ ] ) } disabled = { [ true , false , true , false , true ] } />
5959 < p style = { { marginTop : 8 , color : '#999' } } >
6060 Handles at 10, 50, 90 are disabled.
6161 Handle at 30 can only move between 10-50, handle at 70 can only move between 50-90.
0 commit comments