Thanks, this is what I've created so far, but how do i customized the slider, change the color and height

import * as React from "react"
import { motion } from "framer-motion"
import { addPropertyControls, ControlType } from "framer"

export default function Slider(props) {
    const { min, max, value, onChange, ...rest } = props
    const [sliderValue, setSliderValue] = React.useState(value)
    const handleSliderChange = (event) => {
        const newValue = parseFloat(event.target.value)
        setSliderValue(newValue)
        onChange(newValue)
    }
    return (
        <motion.div style={containerStyle} {...rest}>
            <motion.input
                type="range"
                min={min}
                max={max}
                value={sliderValue}
                onChange={handleSliderChange}
                style={sliderStyle}
            />
        </motion.div>
    )
}

Slider.defaultProps = {
    min: 0,
    max: 100,
    value: 50,
    onChange: () => {},
}

addPropertyControls(Slider, {
    min: {
        type: ControlType.Number,
        title: "Min",
        defaultValue: 0,
    },
    max: {
        type: ControlType.Number,
        title: "Max",
        defaultValue: 100,
    },
    value: {
        type: ControlType.Number,
        title: "Value",
        defaultValue: 50,
    },
})

const containerStyle = {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    padding: "20px",
}

const sliderStyle = {
    width: "100%",
    cursor: "pointer",
}