Examples.

A collection of examples of the slider in action and implementation ideas.

Full interface.

Available settings with toggle buttons and meters. Please don't do this in prod this is for figuring out how it works

interface

speed

progress

enable

toggle

current

Read.

Slide 0

Progress 0

Speed 0

Current 0

Target 0

Configure.

Lerp Factor 0.3

Speed Decay 0.85

Drag Sensitivity 0.005

Toggle.

0

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

Controls.

Previous and next buttons, clickable dots.

Infinite

Snap

controls

current

0

1

2

3

4

5

6

7

8

9

10

11

12

13

Keyboard controls.

Arrow keys, spacebar, and number keys to navigate. Nothing on mobile.

Infinite

Snap

controls

0

1

2

3

4

5

6

7

8

9

10

Parallax.

Weird parallax effect but kinda exemplifies why you might want it.

Infinite

Snap

Parallax

current

0

1

2

3

4

5

6

7

8

9

10

11

12

13

14

Parallax + speed.

Parallax and speed used in conjunction to create a bouncy effect.

Infinite

Snap

Parallax

Speed