Add a new Input Component: Slider. Vertical or Horizontal.

This will give the ability to change input value without typing. Also with the min and max predefined, you can ensure the input data will be in the right range.


  • Avatar
    Klipfolio Support Official comment

    Thanks for your idea!

    We will explore the possibility and add it to our list for prioritization.

  • 0
    Matt Banks

    Has this moved forward? a slider with min max would be very useful and allow old Cytstal Xcelcius dashboards to finally move to Klipfolio!

  • 0
    Scott Lawrence

    Hi Matt,

    We have investigated and outlined a concept to explore.  We are still investigating timing.



  • 0
    Bernard Leussink

    To which degree could a slider be made with the HTML Template-component?

  • 0
    Chanly Nguyen
  • 0
    Nate Heavilin

    Not sure if Matt or Bernard are still looking for an answer, but the suggestion of an HTML component sparked me on my own search for a slider option. I have found enough pieces to make a proof of concept- but it can only set variables on the actual dashboard page- it does not set variables in the editor. However, I can work around this and change the default value for the variable while working in the editor. Maybe one of Klipfolio's developers have a solution for that.

    in this example, I'm using a Klipfolio variable called $slider. Here's the HTML used:

    <form name="sliderControl">

    <input type="range" name="sliderInputName" id="sliderInputId" style="width:80%;" value="24" min="1" max="200" step="1" oninput="sliderOutputId.value = sliderInputId.value">

    <output name="sliderOutputName" id="sliderOutputId">24</output>



    And the Javascript/Jquery:

    $('#sliderInputId').mouseup(function() {


    Stack overflow and w3schools helped me through this problem. Essentially, the form as a slider (HTML5) and an output that updates as you change the slider position. Then the jquery event is a "mouseup" meaning that when our slider input has been clicked on (down) and released (up), then the variable setting javascript that I found on the community board (link below) sets the $slider variable to the slider output value.

    There are lots of possibilities here, you could use other jquery events to trigger the variable setting, such as the click of a button. That might help if you wanted to use a few sliders to set multiple variables. I've tried only one variable on a single klip, and I am very pleased with how quickly it works and how formulas and graph style components respond to it just as well as other input controls. I have not tested this on mobile or on any other browser but chrome just yet. 


  • 0
    Bernard Leussink

    Brilliant. Will use this, thanks Nate!

Please sign in to leave a comment.