Framer Slider
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
- Slider Wrapping. Simple example with realtime value.
- Value Modulating. Adjust the background color of a layer.
- Gradient Sliders. Adjust the properties of a linear gradient.
- Photo Filters. Adjust saturation, contrast and grayscale filters.
- See the Framer Audio module for more.
Resources
- SliderComponent Properties — Discover all properties.
- SliderComponent Events — Discover all events.
- SliderComponent Guide — See the official beginners guide.
- Utils.Modulate Docs — Learn how to convert value ranges.
Contact
- Follow me @benjaminnathan.
- Follow @framer.