{"id":13715045,"url":"https://github.com/benjamindenboer/FramerSlider","last_synced_at":"2025-05-07T03:31:10.504Z","repository":{"id":148913424,"uuid":"108453848","full_name":"benjamindenboer/FramerSlider","owner":"benjamindenboer","description":"Design with Sliders in Framer. (https://framer.com)","archived":false,"fork":false,"pushed_at":"2017-11-11T15:59:44.000Z","size":56,"stargazers_count":41,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-12T21:12:37.883Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"CoffeeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/benjamindenboer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-10-26T19:03:12.000Z","updated_at":"2024-02-01T15:06:08.000Z","dependencies_parsed_at":"2023-07-25T06:30:23.026Z","dependency_job_id":null,"html_url":"https://github.com/benjamindenboer/FramerSlider","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benjamindenboer%2FFramerSlider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benjamindenboer%2FFramerSlider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benjamindenboer%2FFramerSlider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benjamindenboer%2FFramerSlider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/benjamindenboer","download_url":"https://codeload.github.com/benjamindenboer/FramerSlider/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252806421,"owners_count":21807199,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T00:00:53.322Z","updated_at":"2025-05-07T03:31:10.497Z","avatar_url":"https://github.com/benjamindenboer.png","language":"CoffeeScript","funding_links":[],"categories":["Modules"],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  \u003cimg src=\"https://d.pr/i/TZ2kXs+\" width=\"160\" alt=\"icon\"\u003e\u003cbr\u003e\n  Framer Slider\u003cbr\u003e\n  \u003cbr\u003e\n\u003c/h1\u003e\n\u003cbr\u003e\n\n\u003cp align=\"center\"\u003e\n   \u003cimg src=\"https://d.pr/i/jdsv6T+\" width=\"820\" alt=\"banner\"\u003e\t\n  \u003cbr\u003e\n  \u003ch6 align=\"center\"\u003eINTRODUCTION\u003c/h6\u003e\n  \u003cp align=\"center\"\u003eFrom adaptive sliders created in \u003ca href=\"https://framer.com/features/design?utm_source=github\u0026utm_medium=link\u0026utm_campaign=framer_slider_benjamin\"\u003eDesign\u003c/a\u003e to fully functional ones in \u003ca href=\"https://framer.com/features/code?utm_source=github\u0026utm_medium=link\u0026utm_campaign=framer_slider_benjamin\"\u003eCode\u003c/a\u003e. A \u003cstrong\u003eFramer\u003c/strong\u003e module that allows you to design sliders and then bring them to life, without losing customizability. Appearance and logic—separated.\u003c/p\u003e\n\u003c/p\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\n## Get Started\nFirst, grab the `slider.coffee` file and place it within the `/modules` folder (located within your `.framer` folder).\nThen, to include the module, `require` the `Slider` class:\n\n```\n# Include the module\n{Slider} = require \"slider\"\n```\n\nThe `Slider.wrap` method takes three parameters:\n- `background` — The background layer of the slider.\n- `fill` — The fill layer of the slider.\n- `knob` – The knob layer of the slider.\n\nAll 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. \n\n```\n# Wrap slider logic\nSlider.wrap(background, fill, knob)\n```\n\nTo customize the Slider, you can store it in a variable.\n\n```\n# Wrap slider logic\nslider = Slider.wrap(background, fill, knob)\n```\n\nThis allows you to customize its properties, like the `min`, `max` and `value`.\n\n```\n# Set range, default value\nslider.props = \n\tmin: 0\n\tmax: 100\n\tvalue: 50\n```\n\nAnd finally—to output its values, you can use the `onValueChange` method.\n\n```\n# Update value \u0026 print output\nslider.onValueChange -\u003e\n\tprint slider.value\n```\n---\n\n## Examples\n\n- **[Slider Wrapping](https://framer.cloud/aWnxD).** Simple example with realtime value.\n- **[Value Modulating](https://framer.cloud/WJpNi).** Adjust the background color of a layer.\n- **[Gradient Sliders](https://framer.cloud/rqJjF/).** Adjust the properties of a linear gradient.\n- **[Photo Filters](https://framer.cloud/ervdH).** Adjust saturation, contrast and grayscale filters.\n- See the **[Framer Audio](https://github.com/benjamindenboer/FramerAudio)** module for more.\n\n---\n\n## Resources\n- **[SliderComponent Properties](https://framer.com/docs/#slider.slidercomponent)** — Discover all properties.\n- **[SliderComponent Events](https://framer.com/docs/#events.value)** — Discover all events.\n- **[SliderComponent Guide](https://framer.com/getstarted/guides/code/#slider)** — See the official beginners guide.\n- **[Utils.Modulate Docs](https://framer.com/docs/#utils.modulate)** — Learn how to convert value ranges.\n\n---\n\n## Contact\n- Follow me \u003ca href=\"https://twitter.com/benjaminnathan\"\u003e@benjaminnathan\u003c/a\u003e.\n- Follow \u003ca href=\"https://twitter.com/framer\"\u003e@framer\u003c/a\u003e.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenjamindenboer%2FFramerSlider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbenjamindenboer%2FFramerSlider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenjamindenboer%2FFramerSlider/lists"}