How to create a Slider Dashboard variable/filter in Grafana

Hello Good Evening, Rahul this side.

I’m currently working on creating a Slider as a dashboard variable/filter rather than a dropdown in grafana.

I have created two panels in grafana dashboard: data manipulation panel and Bar chart panel. I have also created a dashboard variable named “Year” in the dashboard.

Currently i have retrieved india’s population data with duration from 1960 to 2022 from postgresql in bar chart panel and visualize it in the graph. Then i integrated the dashboard filter variable in bar chart panel. so now when user select a year from dashboard filter variable then data gets filtered out in the bar chart panel & visualise only data from that specific year.

Now i have created a new panel called data manipulation panel where i created a slider form element & provided min & max value statically 1960 & 2022 respectively.

Requirement: Now i want that when user select the data from slider in data manipulation panel then the user input gets pushed in the dashboard variable & as i have already integrated the dashbaord variable in bar chart panel then the value will change from slider to bar chart panel.

What i have done till now:

  1. I have gone through community & documentation.

  2. No built in functionality to create a slider as a dashboard variable.

  3. No customization option in Grafana Local Directory

  4. Gone through “Variable Panel” but only have option to display as table, dropdown & scroll as radio button

  5. Currently working on “Data Manipulation Panel” & they have option for slider but i can set a value in slider from dashboard variable but vice versa is not working.

Can anyone help me on how to create a filter variable as a slider for a graph rather than a dropdown?

1 Like

Might this thread help?

2 Likes

I gone through this thread & I’m able to set a value in slider form element from dashboard filter but vice versa is not working.

please share datasource type, sample data and the code you used.

This is the variable query, bar chart panel query & data manipulation panel query

Dashboard Variable :-

Name: year

Query:
SELECT year FROM india_population_data;

Bar Chart Panel :-

Data Query:

SELECT
country,
year,
total_population
FROM india_population_data
WHERE
(“year” IN (‘$year’) OR ‘$year’ = ‘year’ OR ‘$year’ IS NULL)

LIMIT 50

Data Manipulation Panel:-

Form Element:

Id: year
Label: year
Type: Number Slider
min: 1960
max: 2022
step: 1

Update Request code:

onChange(elements.map((element) => {
if (element.id === ‘year’) {
$year = element.value; // Set the dashboard variable “year” to the value of the form element “year”
}
return element;
}));

we cant remotely see your india table. post sample data




did you find the mistake after looking at the data & queries?





@rsm Your Update Query is not correct. Please read the recent blog and video:

1 Like