glide-design-system/src/lib/components/slider/Slider.js

Glide design system is an open-source React component library. It offers numerous benefits that make them essential tools for design and development teams.

import React from "react";
import styles from "./slider.module.css";

const Slider = ({
  onChange,
  containerClass,
  containerStyle,
  className,
  style,
  primaryColor,
  secondaryColor,
  ...props
}) => {
  const percentage = (props?.value / (props?.max ? props?.max : 100)) * 100;
  const combinedStyle = {
    background: `linear-gradient(to right, ${
      primaryColor ? primaryColor : "#1b3764"
    } ${percentage}%, ${
      secondaryColor ? secondaryColor : "#fff"
    } ${percentage}%)`,
    ...style,
  };

  return (
    <div
      style={containerStyle}
      className={`${styles.sliderContainer} ${
        containerClass && containerClass
      }`}
    >
      <input
        type="range"
        style={combinedStyle}
        className={`${styles.slider} ${className && className}`}
        onChange={(e) => onChange && onChange(e.target.value)}
        {...props}
      />
    </div>
  );
};

export default Slider;