Skip to main content
Announcements
Qlik Introduces a New Era of Visualization! READ ALL ABOUT IT
cancel
Showing results for 
Search instead for 
Did you mean: 
Asuod_
Contributor III
Contributor III

Filter Selection with Range Slider

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.

Labels (1)
1 Solution

Accepted Solutions
Andrei_Cusnir
Specialist
Specialist

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. 
 

Help users find answers! Don't forget to mark a solution that worked for you! 🙂

View solution in original post

2 Replies
Andrei_Cusnir
Specialist
Specialist

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. 
 

Help users find answers! Don't forget to mark a solution that worked for you! 🙂
Asuod_
Contributor III
Contributor III
Author

Thank you so much! This was extremely helpful!