MagneticSlider

A lightweight, spec-compliant extension of material-ui's Slider component, that enables the slider thumb to be attracted to the marks by a finely-configurable magnetic force. Acts as a hybrid between the continuous and discrete slider variants, where the thumb is allowed to move continuously between the discrete steps, but snaps to the nearest step when brought close enough to it.

No dependencies, aside from React and @material-ui/core.

See the Slider component and Slider API documentation.

Inspired by this StackOverflow question and its sole answer by SO user Shreya.

Installation

npm i magnetic-slider

Usage

import React from "react";
import ReactDOM from "react-dom";

import MagneticSlider from "magnetic-slider";

function App() {
  return (
    <MagneticSlider
      magneticRadius={2}
      marks={
        [0, 20, 37, 100].map((temperature) => ({
          value: temperature,
          label: `${temperature}°C`
          // magneticScale: 1
        }))
      }
    />
  );
}

ReactDOM.render(<App />, document.querySelector("#app"));

Live demo

Documentation

Component

API