How to create a Slider Dashboard variable/filter in Grafana

[rsm]

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?

[rsm]

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.

[yosiasz]

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

[rsm]

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;
}));

[yosiasz]

@rsm

india_population_data

we cant remotely see your india table. post sample data

[rsm]

[rsm]

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

[mikhailvolkov]

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

Synchronize dashboard variables with Data Manipulation panel | Volkov Labs