Splunk Search

Want to add a custom slider input

sumeetsirohi1
New Member

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.

0 Karma

gaurav_maniar
Builder

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 #.

0 Karma

sumeetsirohi1
New Member

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

0 Karma

ND
Path Finder

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.

0 Karma

gaurav_maniar
Builder

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.

0 Karma

patrickprodoehl
Explorer

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!

0 Karma
Got questions? Get answers!

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Meet up IRL or virtually!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Get Updates on the Splunk Community!

Why Splunk Customers Should Attend Cisco Live 2026 Las Vegas

Why Splunk Customers Should Attend Cisco Live 2026 Las Vegas     Cisco Live 2026 is almost here, and this ...

What Is the Name of the USB Key Inserted by Bob Smith? (BOTS Hint, Not the Answer)

Hello Splunkers,   So you searched, “what is the name of the usb key inserted by bob smith?”  Not gonna lie… ...

Automating Threat Operations and Threat Hunting with Recorded Future

    Automating Threat Operations and Threat Hunting with Recorded Future June 29, 2026 | Register   Is your ...