| 
									
										
										
										
											2023-05-15 08:51:32 +08:00
										 |  |  | import ReactSlider from 'react-slider' | 
					
						
							| 
									
										
										
										
											2024-07-09 15:05:40 +08:00
										 |  |  | import cn from '@/utils/classnames' | 
					
						
							| 
									
										
										
										
											2023-05-15 08:51:32 +08:00
										 |  |  | import './style.css' | 
					
						
							| 
									
										
										
										
											2023-11-18 11:53:35 +08:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-05-15 08:51:32 +08:00
										 |  |  | type ISliderProps = { | 
					
						
							| 
									
										
										
										
											2023-11-13 22:32:39 +08:00
										 |  |  |   className?: string | 
					
						
							| 
									
										
										
										
											2023-05-15 08:51:32 +08:00
										 |  |  |   value: number | 
					
						
							|  |  |  |   max?: number | 
					
						
							|  |  |  |   min?: number | 
					
						
							|  |  |  |   step?: number | 
					
						
							| 
									
										
										
										
											2023-10-12 23:14:28 +08:00
										 |  |  |   disabled?: boolean | 
					
						
							| 
									
										
										
										
											2023-05-15 08:51:32 +08:00
										 |  |  |   onChange: (value: number) => void | 
					
						
							|  |  |  | } | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-11-13 22:32:39 +08:00
										 |  |  | const Slider: React.FC<ISliderProps> = ({ className, max, min, step, value, disabled, onChange }) => { | 
					
						
							| 
									
										
										
										
											2023-05-15 08:51:32 +08:00
										 |  |  |   return <ReactSlider | 
					
						
							| 
									
										
										
										
											2023-10-12 23:14:28 +08:00
										 |  |  |     disabled={disabled} | 
					
						
							| 
									
										
										
										
											2023-08-12 00:57:13 +08:00
										 |  |  |     value={isNaN(value) ? 0 : value} | 
					
						
							|  |  |  |     min={min || 0} | 
					
						
							|  |  |  |     max={max || 100} | 
					
						
							|  |  |  |     step={step || 1} | 
					
						
							| 
									
										
										
										
											2023-11-13 22:32:39 +08:00
										 |  |  |     className={cn(className, 'slider')} | 
					
						
							| 
									
										
										
										
											2023-08-12 00:57:13 +08:00
										 |  |  |     thumbClassName="slider-thumb" | 
					
						
							|  |  |  |     trackClassName="slider-track" | 
					
						
							|  |  |  |     onChange={onChange} | 
					
						
							|  |  |  |   /> | 
					
						
							| 
									
										
										
										
											2023-05-15 08:51:32 +08:00
										 |  |  | } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | export default Slider |