react-slider-range 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Nihar Mondal
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,113 @@
+# React Range Slider
+
+> A lightweight, accessible React range slider component with dual-thumb support.
+> Built with React + TypeScript, supports controlled and uncontrolled usage, keyboard navigation, touch/mouse interaction, and full styling control.
+
+This package is designed as a modern alternative to react-slider with minimal API surface and zero external dependencies.
+
+## ✨ Features
+
+-   Dual-thumb range slider
+-   Controlled & uncontrolled modes
+-   Keyboard accessible (ARIA compliant)
+-   Mouse & touch support
+-   Customizable styles via class names
+-   Optional tooltip support
+-   Written in TypeScript
+-   No external UI dependencies
+
+### 📦 Installation
+
+```bash
+npm install react-slider-input
+# or
+yarn add react-slider-input
+# or
+pnpm add react-slider-input
+```
+
+### 🚀 Usage
+
+**1. Basic Example**
+
+```bash
+import { Slider } from "react-slider-input";
+
+export default function Example() {
+  return (
+    <Slider
+      min={0}
+      max={100}
+      defaultValue={[20, 80]}
+      onChange={(value) => console.log(value)}
+    />
+  );
+}
+```
+
+**2.Controlled Example**
+
+```bash
+import { useState } from "react";
+import { Slider } from "react-slider-input";
+
+export default function ControlledExample() {
+  const [value, setValue] = useState<[number, number]>([30, 70]);
+
+  return (
+    <Slider
+      min={0}
+      max={100}
+      value={value}
+      onChange={setValue}
+      onChangeCommitted={(val) => console.log("Committed:", val)}
+    />
+  );
+}
+```
+
+### 🧩 Props
+
+| Prop                | Type                | Default            | Description                  |
+| ------------------- | ------------------- | ------------------ | ---------------------------- |
+| `min`               | `number`            | `0`                | Minimum slider value         |
+| `max`               | `number`            | `100`              | Maximum slider value         |
+| `step`              | `number`            | `1`                | Step increment               |
+| `defaultValue`      | `[number, number]`  | `[min, max]`       | Initial range (uncontrolled) |
+| `value`             | `[number, number]`  | —                  | Controlled value             |
+| `onChange`          | `(value) => void`   | —                  | Fires on value change        |
+| `onChangeCommitted` | `(value) => void`   | —                  | Fires on drag end            |
+| `disabled`          | `boolean`           | `false`            | Disable slider               |
+| `className`         | `string`            | `""`               | Wrapper class                |
+| `trackClassName`    | `string`            | `""`               | Track class                  |
+| `rangeClassName`    | `string`            | `""`               | Active range class           |
+| `thumbClassName`    | `string`            | `""`               | Thumb class                  |
+| `showTooltip`       | `boolean`           | `false`            | Show value tooltip           |
+| `formatTooltip`     | `(value) => string` | `value.toString()` | Tooltip formatter            |
+
+### ♿ Accessibility
+
+-   Fully keyboard navigable (ArrowLeft / ArrowRight)
+-   Proper role="slider" and ARIA attributes
+-   Screen-reader friendly
+-   Focusable thumbs
+
+### 🧠 Why This Slider?
+
+-   Smaller API than react-slider
+-   No external dependencies
+-   Better TypeScript support
+-   Easier styling
+-   Built for modern React (hooks, forwardRef)
+
+### 🛠 Tech Stack
+
+-   React
+-   TypeScript
+-   Hooks
+-   Forward refs
+-   ARIA accessibility
+
+### 📄 License
+
+MIT © Nihar Mondal

package/dist/index.cjs

@@ -0,0 +1,171 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Slider: () => Slider
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/Slider.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Slider = (0, import_react.forwardRef)(
+  ({
+    min = 0,
+    max = 100,
+    step = 1,
+    defaultValue = [min, max],
+    value,
+    onChange,
+    onChangeCommitted,
+    disabled = false,
+    className = "",
+    trackClassName = "",
+    rangeClassName = "",
+    thumbClassName = "",
+    showTooltip = false,
+    formatTooltip = (val) => val.toString()
+  }, ref) => {
+    const isControlled = value !== void 0;
+    const [localValue, setLocalValue] = (0, import_react.useState)(
+      isControlled ? value : defaultValue
+    );
+    const currentValue = isControlled ? value : localValue;
+    const [activeThumb, setActiveThumb] = (0, import_react.useState)(null);
+    const trackRef = (0, import_react.useRef)(null);
+    (0, import_react.useEffect)(() => {
+      if (isControlled) setLocalValue(value);
+    }, [isControlled, value]);
+    const clamp = (0, import_react.useCallback)(
+      (val) => Math.min(max, Math.max(min, val)),
+      [min, max]
+    );
+    const getPercentage = (val) => (val - min) / (max - min) * 100;
+    const updateValue = (0, import_react.useCallback)(
+      (next) => {
+        const sorted = [
+          Math.min(next[0], next[1]),
+          Math.max(next[0], next[1])
+        ];
+        if (!isControlled) setLocalValue(sorted);
+        onChange?.(sorted);
+      },
+      [isControlled, onChange]
+    );
+    const commit = (0, import_react.useCallback)(() => {
+      onChangeCommitted?.(currentValue);
+    }, [onChangeCommitted, currentValue]);
+    const startDrag = (index) => {
+      if (!disabled) setActiveThumb(index);
+    };
+    const handlePointerMove = (0, import_react.useCallback)(
+      (clientX) => {
+        if (activeThumb === null) return;
+        const getValueFromPosition = (clientX2) => {
+          if (!trackRef.current) return min;
+          const rect = trackRef.current.getBoundingClientRect();
+          const percent = (clientX2 - rect.left) / rect.width;
+          const raw = percent * (max - min) + min;
+          return clamp(Math.round(raw / step) * step);
+        };
+        const updated = [...currentValue];
+        updated[activeThumb] = getValueFromPosition(clientX);
+        updateValue(updated);
+      },
+      [activeThumb, currentValue, updateValue, min, max, step, clamp]
+    );
+    (0, import_react.useEffect)(() => {
+      if (activeThumb === null) return;
+      const onMove = (e) => handlePointerMove(e.clientX);
+      const onTouchMove = (e) => handlePointerMove(e.touches[0].clientX);
+      const onEnd = () => {
+        commit();
+        setActiveThumb(null);
+      };
+      document.addEventListener("mousemove", onMove);
+      document.addEventListener("mouseup", onEnd);
+      document.addEventListener("touchmove", onTouchMove);
+      document.addEventListener("touchend", onEnd);
+      return () => {
+        document.removeEventListener("mousemove", onMove);
+        document.removeEventListener("mouseup", onEnd);
+        document.removeEventListener("touchmove", onTouchMove);
+        document.removeEventListener("touchend", onEnd);
+      };
+    }, [activeThumb, handlePointerMove, commit]);
+    const handleKeyDown = (index) => (e) => {
+      if (disabled) return;
+      let delta = 0;
+      if (e.key === "ArrowRight") delta = step;
+      if (e.key === "ArrowLeft") delta = -step;
+      if (delta !== 0) {
+        e.preventDefault();
+        const updated = [...currentValue];
+        updated[index] = clamp(updated[index] + delta);
+        updateValue(updated);
+        commit();
+      }
+    };
+    const left = getPercentage(currentValue[0]);
+    const right = getPercentage(currentValue[1]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, className: `range-slider ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        ref: trackRef,
+        className: `range-slider-track ${trackClassName}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              className: `range-slider-range ${rangeClassName}`,
+              style: { left: `${left}%`, width: `${right - left}%` }
+            }
+          ),
+          [0, 1].map((i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              className: `range-slider-thumb ${thumbClassName}`,
+              style: {
+                left: `${getPercentage(currentValue[i])}%`,
+                transform: "translateX(-50%)"
+              },
+              role: "slider",
+              tabIndex: disabled ? -1 : 0,
+              "aria-valuemin": min,
+              "aria-valuemax": max,
+              "aria-valuenow": currentValue[i],
+              "aria-disabled": disabled,
+              onMouseDown: () => startDrag(i),
+              onTouchStart: () => startDrag(i),
+              onKeyDown: handleKeyDown(i),
+              children: showTooltip && activeThumb === i && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "range-slider-tooltip", children: formatTooltip(currentValue[i]) })
+            },
+            i
+          ))
+        ]
+      }
+    ) });
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Slider
+});

package/dist/index.d.cts

@@ -0,0 +1,21 @@
+import * as react from 'react';
+
+interface SliderProps {
+    min?: number;
+    max?: number;
+    step?: number;
+    defaultValue?: [number, number];
+    value?: [number, number];
+    onChange?: (value: [number, number]) => void;
+    onChangeCommitted?: (value: [number, number]) => void;
+    disabled?: boolean;
+    className?: string;
+    trackClassName?: string;
+    rangeClassName?: string;
+    thumbClassName?: string;
+    showTooltip?: boolean;
+    formatTooltip?: (value: number) => string;
+}
+declare const Slider: react.ForwardRefExoticComponent<SliderProps & react.RefAttributes<HTMLDivElement>>;
+
+export { Slider, type SliderProps };

package/dist/index.d.ts

@@ -0,0 +1,21 @@
+import * as react from 'react';
+
+interface SliderProps {
+    min?: number;
+    max?: number;
+    step?: number;
+    defaultValue?: [number, number];
+    value?: [number, number];
+    onChange?: (value: [number, number]) => void;
+    onChangeCommitted?: (value: [number, number]) => void;
+    disabled?: boolean;
+    className?: string;
+    trackClassName?: string;
+    rangeClassName?: string;
+    thumbClassName?: string;
+    showTooltip?: boolean;
+    formatTooltip?: (value: number) => string;
+}
+declare const Slider: react.ForwardRefExoticComponent<SliderProps & react.RefAttributes<HTMLDivElement>>;
+
+export { Slider, type SliderProps };

package/dist/index.js

@@ -0,0 +1,144 @@
+// src/Slider.tsx
+import { useState, useRef, useEffect, useCallback, forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Slider = forwardRef(
+  ({
+    min = 0,
+    max = 100,
+    step = 1,
+    defaultValue = [min, max],
+    value,
+    onChange,
+    onChangeCommitted,
+    disabled = false,
+    className = "",
+    trackClassName = "",
+    rangeClassName = "",
+    thumbClassName = "",
+    showTooltip = false,
+    formatTooltip = (val) => val.toString()
+  }, ref) => {
+    const isControlled = value !== void 0;
+    const [localValue, setLocalValue] = useState(
+      isControlled ? value : defaultValue
+    );
+    const currentValue = isControlled ? value : localValue;
+    const [activeThumb, setActiveThumb] = useState(null);
+    const trackRef = useRef(null);
+    useEffect(() => {
+      if (isControlled) setLocalValue(value);
+    }, [isControlled, value]);
+    const clamp = useCallback(
+      (val) => Math.min(max, Math.max(min, val)),
+      [min, max]
+    );
+    const getPercentage = (val) => (val - min) / (max - min) * 100;
+    const updateValue = useCallback(
+      (next) => {
+        const sorted = [
+          Math.min(next[0], next[1]),
+          Math.max(next[0], next[1])
+        ];
+        if (!isControlled) setLocalValue(sorted);
+        onChange?.(sorted);
+      },
+      [isControlled, onChange]
+    );
+    const commit = useCallback(() => {
+      onChangeCommitted?.(currentValue);
+    }, [onChangeCommitted, currentValue]);
+    const startDrag = (index) => {
+      if (!disabled) setActiveThumb(index);
+    };
+    const handlePointerMove = useCallback(
+      (clientX) => {
+        if (activeThumb === null) return;
+        const getValueFromPosition = (clientX2) => {
+          if (!trackRef.current) return min;
+          const rect = trackRef.current.getBoundingClientRect();
+          const percent = (clientX2 - rect.left) / rect.width;
+          const raw = percent * (max - min) + min;
+          return clamp(Math.round(raw / step) * step);
+        };
+        const updated = [...currentValue];
+        updated[activeThumb] = getValueFromPosition(clientX);
+        updateValue(updated);
+      },
+      [activeThumb, currentValue, updateValue, min, max, step, clamp]
+    );
+    useEffect(() => {
+      if (activeThumb === null) return;
+      const onMove = (e) => handlePointerMove(e.clientX);
+      const onTouchMove = (e) => handlePointerMove(e.touches[0].clientX);
+      const onEnd = () => {
+        commit();
+        setActiveThumb(null);
+      };
+      document.addEventListener("mousemove", onMove);
+      document.addEventListener("mouseup", onEnd);
+      document.addEventListener("touchmove", onTouchMove);
+      document.addEventListener("touchend", onEnd);
+      return () => {
+        document.removeEventListener("mousemove", onMove);
+        document.removeEventListener("mouseup", onEnd);
+        document.removeEventListener("touchmove", onTouchMove);
+        document.removeEventListener("touchend", onEnd);
+      };
+    }, [activeThumb, handlePointerMove, commit]);
+    const handleKeyDown = (index) => (e) => {
+      if (disabled) return;
+      let delta = 0;
+      if (e.key === "ArrowRight") delta = step;
+      if (e.key === "ArrowLeft") delta = -step;
+      if (delta !== 0) {
+        e.preventDefault();
+        const updated = [...currentValue];
+        updated[index] = clamp(updated[index] + delta);
+        updateValue(updated);
+        commit();
+      }
+    };
+    const left = getPercentage(currentValue[0]);
+    const right = getPercentage(currentValue[1]);
+    return /* @__PURE__ */ jsx("div", { ref, className: `range-slider ${className}`, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: trackRef,
+        className: `range-slider-track ${trackClassName}`,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `range-slider-range ${rangeClassName}`,
+              style: { left: `${left}%`, width: `${right - left}%` }
+            }
+          ),
+          [0, 1].map((i) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `range-slider-thumb ${thumbClassName}`,
+              style: {
+                left: `${getPercentage(currentValue[i])}%`,
+                transform: "translateX(-50%)"
+              },
+              role: "slider",
+              tabIndex: disabled ? -1 : 0,
+              "aria-valuemin": min,
+              "aria-valuemax": max,
+              "aria-valuenow": currentValue[i],
+              "aria-disabled": disabled,
+              onMouseDown: () => startDrag(i),
+              onTouchStart: () => startDrag(i),
+              onKeyDown: handleKeyDown(i),
+              children: showTooltip && activeThumb === i && /* @__PURE__ */ jsx("div", { className: "range-slider-tooltip", children: formatTooltip(currentValue[i]) })
+            },
+            i
+          ))
+        ]
+      }
+    ) });
+  }
+);
+export {
+  Slider
+};

package/package.json

@@ -0,0 +1,61 @@
+{
+	"name": "react-slider-range",
+	"version": "0.0.1",
+	"type": "module",
+	"main": "dist/index.js",
+	"description": "A small, configurable React range slider component.",
+	"types": "dist/index.d.ts",
+	"files": [
+		"dist"
+	],
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/NiharMondal/react-slider-input.git"
+	},
+	"homepage": "https://github.com/NiharMondal/react-slider-input#readme",
+	"bugs": {
+		"url": "https://github.com/NiharMondal/react-slider-input/issues"
+	},
+	"keywords": [
+		"react",
+		"slider",
+		"range",
+		"component",
+		"react-slider",
+		"react-range",
+		"range-slider",
+		"slider-range",
+		"multi-slider",
+		"ui",
+		"component-library"
+	],
+	"author": "Nihar Mondal <developernihar@gmail.com>",
+	"scripts": {
+		"dev": "vite",
+		"build": "tsup src/index.ts --format esm,cjs --dts --tsconfig tsconfig.app.json",
+		"lint": "eslint .",
+		"preview": "vite preview"
+	},
+	"dependencies": {
+		"@tailwindcss/vite": "^4.1.16",
+		"react": "^19.1.1",
+		"react-dom": "^19.1.1",
+		"tailwindcss": "^4.1.16"
+	},
+	"devDependencies": {
+		"@eslint/js": "^9.36.0",
+		"@types/node": "^24.6.0",
+		"@types/react": "^19.1.16",
+		"@types/react-dom": "^19.1.9",
+		"@vitejs/plugin-react": "^5.0.4",
+		"eslint": "^9.36.0",
+		"eslint-plugin-react-hooks": "^5.2.0",
+		"eslint-plugin-react-refresh": "^0.4.22",
+		"globals": "^16.4.0",
+		"tsup": "^8.5.0",
+		"typescript": "~5.9.3",
+		"typescript-eslint": "^8.45.0",
+		"vite": "^7.1.7"
+	}
+}