Rambutan is a vertical slide control. Minimal styling, minimal options. Rambutan automatically resizes to the dimensions of the parent element (see the styling).
Check out the live example!
The contents of the background (or before) and foreground (or after) can be images, backgrounds, colors or HTML elements.
Rambutan is not really a plug-n-play script. It will need a little bit of tweaking of the styling. And it assumes you know what you are doing script-wise. But if that won't hold you back: feel free to use it (see the License for usage).
Add the dist/rambutan.css to your styles and dist/rambutan.js to your scripts.
The script will automatically make a slider from all elements with a rambutan class. See example.html for a basic example.
Make sure there always is a foreground and background element.
You can also add an independent slider through javascript. See this example:
slider = new rambutan.rambutanslider('#myrambutanslider',
[
document.getElementById('DOMelementbackground'),
document.getElementById('DOMelementforeground')
],
{
startingPosition: "50%",
animate: true,
callbackOnInit: null,
callbackOnUpdate: null
});
slider._prepare();
</script>
There are two callback functions you can use: once on initialisation and on every update / interaction. Pass the function as an option to the rambutanslider.
If you are calling a function every update, please make sure it's not resouce intensive. Otherwise you should use a debounce or throttle function.
Some development that's still to do:
- Add build / minified scripts
- Test in older browsers
This vertical slider is heavily inspired by: Juxtapose. Because Juxtapose is aimed at (mostly horizontal) images, Rambutan fills the need for a more bare-bones approach.
Color scheme used in examle by the lovely Happy Hues.
So, why the silly name? Because I'm naming all my open-source projects after ingredients from the South-east Asian kitchen.
Mozilla Public License Version 2.0 (MPL-2.0)