Skip to content

benjamindenboer/FramerSlider

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

39 Commits
 
 
 
 

Repository files navigation

icon
Framer Slider


banner

INTRODUCTION

From adaptive sliders created in Design to fully functional ones in Code. A Framer module that allows you to design sliders and then bring them to life, without losing customizability. Appearance and logic—separated.



Get Started

First, grab the slider.coffee file and place it within the /modules folder (located within your .framer folder). Then, to include the module, require the Slider class:

# Include the module
{Slider} = require "slider"

The Slider.wrap method takes three parameters:

  • background — The background layer of the slider.
  • fill — The fill layer of the slider.
  • knob – The knob layer of the slider.

All of these can be styled completely in the design. The method wraps a component around these 3 layers to handle all of the sliding functionality for you.

# Wrap slider logic
Slider.wrap(background, fill, knob)

To customize the Slider, you can store it in a variable.

# Wrap slider logic
slider = Slider.wrap(background, fill, knob)

This allows you to customize its properties, like the min, max and value.

# Set range, default value
slider.props = 
	min: 0
	max: 100
	value: 50

And finally—to output its values, you can use the onValueChange method.

# Update value & print output
slider.onValueChange ->
	print slider.value

Examples


Resources


Contact

About

Design with Sliders in Framer. (https://framer.com)

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published