Slider API

This is a technical summary of what is offered by our Slider API.

  1. Basics
  2. Examples


To subscribe to events and send events you will use the function You will need access to the DOM element and passing into the second argument the string slider which is the state name. The next argument is a function to handle whenever the slider state has changed at all. The basic setup will look something like this.

const subscription =, "slider", function() { // A change has happened });

The output of this function call is a subscription or event dispatcher. This can dispatch events that update the slider state. The following is an example on how to dispatch the navigateTo property, which changes the slider index. If you change the state through the subscription event you can create an infinite loop. So check any state variables you need to before you do that.

// Setup subscription const subscription =, "slider", function() { // A change has happened }); // Navigate to 2nd slider index // We take the old state and append this new key value // So only navigateTo updates subscription.dispatch(function(prev) { return { ...prev, navigateTo: 2, }; }); // Current values of the state const currentValues = subscription.getState(); // Stop listening to events subscription.unsubscribe();


Update A Slider Using an Index and a Click Event

In this example we will change the slider index of a Slider from the change events of a click event. Through a looper we setup a custom attribute data-looper-index which is equal to the Loopers current index ({{dc:looper:index}}). We then use this index for the click event of these elements to open up a Modal to the valid Slider index. This is supposed to resemble an Image Gallery.

Download the Example Page Here

// On click to a gallery item // open the modal and navigate to the valid slide window.addEventListener("load", function() { // Nicer alias var rivet = window.csGlobal.rivet; // Get Dom Element const gallerySlider = document.querySelector(".gallery-slider"); // Setup subscription const smallSliderSub =, "slider"); // Main update func to another index function updateSlider(index) { smallSliderSub.dispatch(function(prev) { return { ...prev, navigateTo: index, }; }); } // Attach to gallery items rivet.attach(".gallery-item", function(el) { let index = el.getAttribute("data-looper-index") - 1; index = Math.max(0, index); // Click event handler return rivet.util.listener(el, "click", function(e) { updateSlider(index); }); }); });

Pausing Vimeo Videos on Slider Changes

In this example we have a slider filled with Vimeo videos. When the slider changes, we want the current video to stop. Whenever the slider does anything, like change, we then pause the Vimeo video.

// Using class of vimeo-video in Cornerstone // Use that to find all iframes to check const VIDEO_WRAPPER_SELECTORS = ".vimeo-video"; // Setup on load window.addEventListener("load", function() { // We create a script that loads in the Vimeo API // You could load this elsewhere though // and just call setupVideoReset(); // Which is what we do for the scripts onload event const script = document.createElement("script"); script.src = ""; script.onload = setupVideoReset; document.body.appendChild(script); }); // Find all videos // And set them up function setupVideoReset() { const videos = document.querySelectorAll(".vimeo-video"); for(var i = 0; i < videos.length; ++i) { setupVideo(videos[i]); } } // Setup a video to look at events and pause videos function setupVideo(videoWrapper) { // Use either this element if it is an iframe // Or find an iframe in this container const iframe = videoWrapper.tagName === "IFRAME" ? videoWrapper : videoWrapper.querySelector("iframe"); if (!iframe) { console.warn("No iframe found for", videoWrapper); return; } // Setup player from Vimeo API const player = new Vimeo.Player(iframe); // Find which slider we are using to look at events from const sliderEl = document.querySelector(".slider"); // Subscribe and watch any changes to the slider, "slider", function() { // Pause on any change to slider player.pause(); }); }

See something inaccurate? Let us know