Re: Want to add a custom slider input

sumeetsirohi1 · ‎11-10-2019

Hi,

How can i add a custom input which will be a slider with values ranging from 0 - 100 and pass the token value to the search query.

gaurav_maniar · ‎11-11-2019

hi,

Add html input in the dashboard and handle change values from javascript to set token.

<form script="html_input.js">
    <fieldset submitButton="true">
        <html>
            <label>Range 0-20 step=2</label>
            <input type="range" id="slider_input" value="10" min="0" max="20" step="1"/>
        </html>
    </fieldset>
    <row>
        <panel>
            <table>
                <search>
                    <query>|makeresults | eval slider_value=$slider_value$</query>
                    <earliest>-1h@h</earliest>
                    <latest>now</latest>
                </search>
            </table>
        </panel>
    </row>
<form>

html_input.js

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
 ], function(_, $, mvc){

    var tokens = mvc.Components.get('default');

    $(document).on("input change", "#slider_input", function(){
        tokens.set("slider_value", $(this).val());
    });
});

UPDATE
at line 10, element id was used without #.

sumeetsirohi1 · ‎11-14-2019

I tried the above the js file but $slider_value$ is not taking the value from slider.Just says "waiting for input"

ND · ‎07-27-2021

Yes, its saying waiting for input.

can someone explain , how we are passing token value in table query for search for slider. after eval Slider_value= $Slider_Value$

@sumeetsirohi1 @patrickprodoehl @gaurav_maniar

thanks.

gaurav_maniar · ‎11-15-2019

answer updated.

Splunk javascript is stored in browser cache and in Splunk javascript changes are not loaded automatically on browser side.
So once you update your script, goto https://splunk_host:8000/en-US/_bump and click Bump Version it will reload the updated javascript.

accept the answer if it helps.

patrickprodoehl · ‎04-02-2020

amendment: the first code sections contains a closing form tag, which is missing the closing / in </form>.

Thanks for sharing the answer! Works like a charm for me!

Want to add a custom slider input

Splunk Custom Visualizations App End of Life

Introducing Splunk Enterprise 9.2

Adoption of RUM and APM at Splunk