gistfile1.txt

import { sliderprimitive } from "@modulz/primitives";

const Slider = sliderprimitive();

const { Thumb, InnerTrack, Track } = Slider;
Slider.style({
  [Track]: {
    borderRadius: "3px",
    backgroundColor: "gainsboro",
  },
  [Thumb]: {
    width: "10px",
    height: "10px",
    border: "none",
    borderRadius: "15px",
    "::after": {
      content: '""',
      position: "absolute",
      borderRadius: "15px",
      width: "100%",
      height: "100%",
      boxShadow: "0 5px 15px #000",
      opacity: "0",
    }
  },
  ":hover": {
    [Thumb]: {
      "::after": {
        opacity: "1"
      }
    }
  }
});

Slider.variant("size", {
  normal: {
    [Thumb]: {
      width: "15px",
      height: "15px"
    }
  },
  large: {
    [Thumb]: {
      width: "25px",
      height: "25px"
    }
  }
});

Slider.variant("color", {
  red: {
    [Thumb]: {
      background: "tomato"
    },
    [InnerTrack]: {
      background: "red"
    }
  },
  blue: {
    [Thumb]: {
      background: "blue"
    },
    [InnerTrack]: {
      background: "cyan"
    }
  }
});

export const Slider = Slider.bake();