@@ -8,6 +8,8 @@ interface SliderInputProps {
88 defaultValue : number
99 blockId : string
1010 subBlockId : string
11+ step ?: number
12+ integer ?: boolean
1113}
1214
1315export function SliderInput ( {
@@ -16,6 +18,8 @@ export function SliderInput({
1618 defaultValue,
1719 blockId,
1820 subBlockId,
21+ step = 0.1 ,
22+ integer = false ,
1923} : SliderInputProps ) {
2024 const [ value , setValue ] = useSubBlockValue < number > ( blockId , subBlockId )
2125
@@ -26,12 +30,14 @@ export function SliderInput({
2630 // If value exceeds max, scale it down proportionally
2731 if ( value > max ) {
2832 const prevMax = Math . max ( max * 2 , value ) // Assume previous max was at least the current value
29- return ( value / prevMax ) * max
33+ const scaledValue = ( value / prevMax ) * max
34+ return integer ? Math . round ( scaledValue ) : scaledValue
3035 }
3136
3237 // Otherwise just clamp it
33- return Math . min ( Math . max ( value , min ) , max )
34- } , [ value , min , max , defaultValue ] )
38+ const clampedValue = Math . min ( Math . max ( value , min ) , max )
39+ return integer ? Math . round ( clampedValue ) : clampedValue
40+ } , [ value , min , max , defaultValue , integer ] )
3541
3642 // Update the value if it needs normalization
3743 useEffect ( ( ) => {
@@ -46,8 +52,8 @@ export function SliderInput({
4652 value = { [ normalizedValue ] }
4753 min = { min }
4854 max = { max }
49- step = { 0.1 }
50- onValueChange = { ( value ) => setValue ( value [ 0 ] ) }
55+ step = { integer ? 1 : step }
56+ onValueChange = { ( value ) => setValue ( integer ? Math . round ( value [ 0 ] ) : value [ 0 ] ) }
5157 className = "[&_[role=slider]]:h-4 [&_[role=slider]]:w-4 [&_[class*=SliderTrack]]:h-1"
5258 />
5359 < div
@@ -62,7 +68,7 @@ export function SliderInput({
6268 top : '24px' ,
6369 } }
6470 >
65- { Number ( normalizedValue ) . toFixed ( 1 ) }
71+ { integer ? Math . round ( normalizedValue ) . toString ( ) : Number ( normalizedValue ) . toFixed ( 1 ) }
6672 </ div >
6773 </ div >
6874 )
0 commit comments