Log in to AnswerLog in to Follow
2021-04-12 11-47-04
Bart Nooijens
31Views
8Comments
[OutSystems UI] RangeSliderInterval with input fields
Question
Reactive
Forge
OutSystems UI
OutSystems UI Patterns
outsystems-ui
Reactive icon
OutSystems UI
Forge component by Platform Maintenance
Application Type
Reactive

Hi Community,

We currently use a range slider interval to set the min and max price of the shown products and this is working fine. In a newly added use case users also need to be able to change the min and max price via an input field.  I did check the documentation of the library OutSystems is using and I think it should be possible as you can see here. I am not sure on how to port this to OutSystems to make this working. Does anyone have a example on how to do this? I did attach a .oml with a slightly configured RangeSliderInterval to use as a playground.

Thanks,

Bart

RangeSliderInterval.oml

0
0
22 Apr

Hello @Bart Nooijens 

From what you posted, I assumed you're trying to make a Range Slider Interval work with both handles and inputs, correct?

If so, what you need to do is to have two input fields that are connected to a variable

In the screenshot you have provided, you should have Client.ProductListFilterPriceRangeMin and Client.ProductListFilterPriceRangeMin bound to an input field.

Check the OML I attached and let me know if that was what you were looking for!

Joana

RangeSliderInterval.oml

0
0
22 Apr

Hi Joana,

Thanks for your reply!

I think my explanation of the use case wat not clear enough, sorry about that. I'll try to explain it a bit better.

When you slide with one of the handles of the range slider the input value should update dynamically (visually the same as the tooltip that is above the handle). One of the other things that is happening when I directly attach the client variables to the input is that the products are getting refreshed every time I update 1 number (for example: 4000 is in the input and when i delete the last 0 (so it becomes 400) the products are directly refreshed to be lower then the 400 range). It should be updated when pushing a button or when the input is not in focus any more. 

I also did add an example of what I am trying to explain. Does this explain my use case a bit more/better?

Best,

Bart

example.mp4

0
0
22 Apr
2021-03-18 21-03-15
Benjith Sam
mvp_badge
MVP

Replying to Bart Nooijens' comment on 22 Apr 2022 16:30:12

Hi Bart,

In addition to the solution shared by Joana, you would need to use the RangeSliderInterval OnChange Handler input parameter values, i.e. IntervalStart & IntervalEnd, to update the max & min input widget values.

See this demo: RangeSliderDemo

Can you share the logic defined for the product list getting refreshed?


Refer to the attached oml

I hope this helps you!


Kind regards,

Benjith Sam

RangeSliderInterval.oml

0
0
23 Apr

Hi Benjith,

Thanks for your reply. The problem is (just as in your demo) that the input is not updating dynamically (realtime). The input is only updating when releasing one of the handles. This is is because the ChangeEventDuringSlide is set to False. But since I am updating a query I only want to refresh the query when a handle is released. I now have the tooltips of the range slider enabled so you can see the price you are sliding to.

For the logic I am not tally sure what you like to see. I have a webblock with a lot of input parameters (two of them are PriceRangeMin and PriceRangeMax). When of the input parameters is changed the products are getting refreshed.

Also, when filling the inputs the price needs to be updated only when the button is pushed. This is logic I already have built in (see attached .oml). In your demo you can see it is not possbile to provide every number.


I also noticed that the '0' was not shown in the input. I did fix it by setting the following attribute at the input.

I did attach a new .oml with the updated logic.

Best,

Bart

UpdatedRangeSliderInterval.oml

0
0
25 Apr

Hi Brat,

The reason you cannot provide every number is because you have set the step property as 100, so it will not take effect on numbers within intervals of 100,

In the provided oml, the range slider is not updating real time because you have set the initial interval of the range slider in Client variables and the input is in local variabel so OnChange of the input you have to update the Client variables.

Also, OnInitialization the client variables are assigned to the local variables but there is no default values for the client variables.

Please refer  the attached oml

I hope this will help.


Best Regards,

Sreejith

UpdatedRangeSliderInterval.oml

0
0
25 Apr

Replying to Sreejith Surendran's comment on 25 Apr 2022 14:04:47

Hi Sreejith,

Thanks for your reply!

Yes, I think you are correct with the step property part. I still think that a user will not get this and is trying to put in every number possibile. So from a UX perspective I think a users needs to be able to set every number possible.

I think we have a misunderstanding and could be that I am not explaining good enough. When a user is sliding one of the handles of in the range interval slider, the input should be updated. Not the other way around. To be clear about this I did add a video to explain. 

The query to refresh my products will be a bit different with the 2 options we have. 

Option 1: Refresh product grid when releasing one of the price ranger interval handles

Option 2: Refresh product grid when typing in new values in the input and push the button



example.mp4

0
0
25 Apr

Replying to Bart Nooijens' comment on 25 Apr 2022 14:35:40


Hi Brat,

Sorry for being late, Now I clearly understood your requirement. In this case, when  ChangeEventDuringSlide is set to True, the refresh will happen frequently. If we set it to False then the Input Field will not update dynamically. For achieving this we should do that by JavaScript in advanced formatting, not sure about that it can be solved within OutSystems itself. But  advanced formatting in  JavaScript can definitely brings a solution.

The problem  is quiet interesting and  I will be trying for the solution. 

Thanks and Regards,

Sreejith

0
0
25 Apr

Replying to Sreejith Surendran's comment on 25 Apr 2022 18:19:36

Hi Sreejith,

No need to say sorry. I am glad my requirements are clear and I already want to thank you for trying to find a solution.

0
0
26 Apr
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.