https://github.com/benjamindenboer/FramerSlider
Design with Sliders in Framer. (https://framer.com)
https://github.com/benjamindenboer/FramerSlider
Last synced: 6 months ago
JSON representation
Design with Sliders in Framer. (https://framer.com)
- Host: GitHub
- URL: https://github.com/benjamindenboer/FramerSlider
- Owner: benjamindenboer
- Created: 2017-10-26T19:03:12.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-11-11T15:59:44.000Z (almost 8 years ago)
- Last Synced: 2025-04-12T21:12:37.883Z (7 months ago)
- Language: CoffeeScript
- Homepage:
- Size: 54.7 KB
- Stars: 41
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-framer - Framer Slider - Module that allows you to design sliders and then bring them to life, without losing customizability. Appearance and logic—separated. (Modules)
README
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](https://framer.cloud/aWnxD).** Simple example with realtime value.
- **[Value Modulating](https://framer.cloud/WJpNi).** Adjust the background color of a layer.
- **[Gradient Sliders](https://framer.cloud/rqJjF/).** Adjust the properties of a linear gradient.
- **[Photo Filters](https://framer.cloud/ervdH).** Adjust saturation, contrast and grayscale filters.
- See the **[Framer Audio](https://github.com/benjamindenboer/FramerAudio)** module for more.
---
## Resources
- **[SliderComponent Properties](https://framer.com/docs/#slider.slidercomponent)** — Discover all properties.
- **[SliderComponent Events](https://framer.com/docs/#events.value)** — Discover all events.
- **[SliderComponent Guide](https://framer.com/getstarted/guides/code/#slider)** — See the official beginners guide.
- **[Utils.Modulate Docs](https://framer.com/docs/#utils.modulate)** — Learn how to convert value ranges.
---
## Contact
- Follow me @benjaminnathan.
- Follow @framer.