Update input components

src/util/InputUtils.tsx

@@ -14,6 +14,7 @@ import WarningCheckbox from "$/component/input/checkbox/WarningCheckbox";
 import DateInput from "$/component/input/date/DateInput";
 import DateTimeInput from "$/component/input/date/DateTimeInput";
 import TimeInput from "$/component/input/date/TimeInput";
+import NumberSlider from "$/component/input/number/NumberSlider";
 import DangerRadioButton from "$/component/input/radio/DangerRadioButton";
 import DarkRadioButton from "$/component/input/radio/DarkRadioButton";
 import InfoRadioButton from "$/component/input/radio/InfoRadioButton";
@@ -572,6 +573,7 @@ export function TextContent(){
 	];
 
 	const [ selected, setSelected ] = useState(selectOptions[0]);
+	const [ numberValue, setNumberValue ] = useState(0);
 
 	return (
 		<div
@@ -584,7 +586,7 @@ export function TextContent(){
 				<TextArea placeholder="Textarea" className="resize" labelClassName="bg-(--bg-color) peer-focus:bg-(--bg-color)"/>
 			</TextDisplay>
 			<TextDisplay title="Select">
-				<SelectInput label={selected.label} onChange={(newValue) => setSelected(selectOptions.find((option) => option.value === newValue) || selectOptions[0])}>
+				<SelectInput placeholder={selected.label} onChange={(newValue) => setSelected(selectOptions.find((option) => option.value === newValue) || selectOptions[0])}>
 					{
 						selectOptions.map((option) => (
 							<OptionInput
@@ -603,20 +605,24 @@ export function TextContent(){
 			>
 				<NumberInput
 					labelClassName="bg-(--bg-color)"
+					value={numberValue}
+					onChange={setNumberValue}
 				>
 					Number Test
 				</NumberInput>
 			</TextDisplay>
-			{/*
+			{/* */
 			<TextDisplay
 				title="Number Slider"
 			>
 				<NumberSlider
 					min={0}
 					max={10}
+					value={numberValue}
+					onChange={setNumberValue}
 				/>
 			</TextDisplay>
-			*/}
+			/* */}
 		</div>
 	);
 }