Filter Selection with Range Slider

Asuod_ — Tue, 03 May 2022 14:02:10 GMT

Hello,
New to Qlik Sense. I’m looking to create a filter dropdown and a slider. Depending on the dropdown selection a single slider underneath the filter that will dynamically change to the selection’s range. I browsed the forum for a solution and couldn’t find anything. Really appreciate if someone can tell me how to do this or point me to a source. Thank you.

Re: Filter Selection with Range Slider

Andrei_Cusnir — Thu, 05 May 2022 10:34:44 GMT

Hello,

Here are the steps that I have followed to achieve a similar use case scenario:

1. In Data load editor I have loaded these table:

load * inline [
Option, Values
Option1, 10 - 100
Option2, 100 - 200
Option3, 200 - 300
];

Essentially what I am saying is that, for Option 1 that minimum value is 10 and the maximum value is 100. For Option 2 the minimum value is 100 and the maximum value is 200 etc.

Therefore, when Option1 is going to be selected in Drop Down menu, the Slider will only be able to selected a value within range 10 and 100 and the corresponding values stand for the resto of the options.

2. I have created 2 variables and added the default value "Option1" for the first one:

3. I have created 2 Variable inputs:

For first Variable Input here are the configurations:

Appearance > Variable > Name : vDropDown
Appearance > Variable > Show as : Drop down
Appearance > Values > Fixed or dynamic values : Dynamic
Appearance > Values > Dynamic values : =Concat(Option, '|')

This will take all the options loaded in the table and concatenate them together to form a list of items that will appear as options in the Drop down menu.

For the second Variable input here are the configurations:

Appearance > Variable > Name : vSlider
Appearance > Variable > Show as : Slider
Appearance > Variable : Check the option "Update on drag"
Appearance > Values > Min : =SubField(Only({<Option={$(vDropDown)}>}Values), ' - ', 1)
Appearance > Values > Max : =SubField(Only({<Option={$(vDropDown)}>}Values), ' - ', 2)

This will take the string '10 - 100', '100 - 200' or '200 - 300' based on the option that is selected in variable vDropDown and then it will split the string based on the delimiter ' - '. Now if you get the first part, it will be e.g. value 10 and if you take the second part it will be value e.g. 100 etc.

So now here is the outcome:

As you can see, if you select Option 1 the slider goes up to value 100 (which is the max for that option). If you select Option 2 the slider will go up to 200 and if you select Option 3 it will go up to 300. You can get the idea of this example and implement/modify it based on your use case scenario.

I hope that this information was helpful. In case I have misunderstood the use case scenario, please elaborate in details by providing additional information. However, if it has helped you resolve the issue, please mark it as accepted solution to give further visibility to other community members.

Re: Filter Selection with Range Slider

Asuod_ — Mon, 09 May 2022 17:46:52 GMT

Thank you so much! This was extremely helpful!

topic Re: Filter Selection with Range Slider in App Development

Filter Selection with Range Slider

Re: Filter Selection with Range Slider

Re: Filter Selection with Range Slider