7 comments
-
Thanks for your idea!
We will explore the possibility and add it to our list for prioritization.
-
Has this moved forward? a slider with min max would be very useful and allow old Cytstal Xcelcius dashboards to finally move to Klipfolio!
-
Hi Matt,
We have investigated and outlined a concept to explore. We are still investigating timing.
Cheers,
Scott.
-
To which degree could a slider be made with the HTML Template-component?
-
-
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>
</form>And the Javascript/Jquery:
$('#sliderInputId').mouseup(function() {
dashboard.setDashboardProp(2,"slider",$('#sliderInputId').val(),dashboard.activeTab.id);
});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.
https://support.klipfolio.com/hc/en-us/community/posts/210894908-A-new-datepicker-using-jQuery
-
Brilliant. Will use this, thanks Nate!