magnetic-slider

1.0.4 • Public • Published

MagneticSlider

MagneticSlider-basic-demo

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

Package Sidebar

Install

npm i magnetic-slider

Weekly Downloads

18

Version

1.0.4

License

ISC

Unpacked Size

13.3 kB

Total Files

4

Last publish

Collaborators

  • louca.developer