Update snippet descriptions

snippets/Slider.md

@@ -3,24 +3,36 @@ title: Slider
 tags: components,input,beginner
 ---
 
-Renders a slider element that uses a callback function to pass its value to the parent component.
+Renders an uncontrolled range input element that uses a callback function to pass its value to the parent component.
 
-- Use object destructuring to set defaults for certain attributes of the `<input>` element.
-- Render an `<input>` element of type `"range"` and the appropriate attributes, use the `callback` function in the `onChange` event to pass the value of the input to the parent.
+- Set the `type` of the `<input>` element to `"range"` to create a slider.
+- Use the `defaultValue` passed down from the parent as the uncontrolled input field's initial value.
+- Use the `onChange` event to fire the `onValueChange` callback and send the new value to the parent.
 
 ```jsx
-const Slider = ({ callback, disabled = false, readOnly = false }) => {
+const Slider = ({ 
+  min = 0,
+  max = 100,
+  defaultValue,
+  onValueChange,
+  ...rest
+}) => {
   return (
     <input
       type="range"
-      disabled={disabled}
-      readOnly={readOnly}
-      onChange={({ target: { value } }) => callback(value)}
+      min={min}
+      max={max}
+      defaultValue={defaultValue}
+      onChange={({ target: { value } }) => onValueChange(value)}
+      {...rest}
     />
   );
 };
 ```
 
 ```jsx
-ReactDOM.render(<Slider callback={val => console.log(val)} />, document.getElementById('root'));
+ReactDOM.render(
+  <Slider onValueChange={val => console.log(val)} />,
+  document.getElementById('root')
+);
 ```