[Resolved] Can I create a sliding rule type field with Toolset?

[Author]

Posts

[himanshuS]

I am allowing users to buy credits on the platform.

They could buy credits from the dropdown by selection (5,10,15.20,30....) credits.

But to make a more visually appealing UI, I was wondering if I can create a horizontal ruler-type UI where the user can drag the pointer to the higher value. Can this be done within Toolset Forms?

[Christopher Amirian]

Hi there,

Toolset Forms does not have such a UI functionality, but I think you can do it by custom Javascript coding.

Here is what I have in mind that you can implement:

Hide the HTML Select which is generated in the Toolset Form using CSS.

Add the sliding UI that you like using a jQuery plugin. Maybe this list can help:

hidden link

But I suggest that you do your research to find out the best method.

Add the necessary HTML code and Javascript needed for that UI in the form.

For the HTML you can use the HTML Content item under the 'Extra Elements' section in the form edit screen (html.png)

And for the CSS and Javascript code, you can use the CSS/JS Editor that is in the Form edit screen. (js.png)

The next step is to add the items generated in the original HTML Select options to the UI. You can select the options via jQuery and then add them to the HTML content according to the UI documentation that you use.

After that, the customer can interact with the UI and select whatever he wants.

The UI must have an Event when something is added to UI or maybe you can use the 'change' event to detect which option is added to UI.

Then you can add a jQuery code inside that event to set the same option as selected in the original HTML Select:

https://stackoverflow.com/questions/314636/how-do-you-select-a-particular-option-in-a-select-element-in-jquery

The idea is that whatever change is done in the UI is reflected in the hidden original HTML select generated by Toolset.

That way, if the customer submits the form it will still set all the data correctly as you selected proper options via jQuery to reflect the data added by the user.

So the Javascript UI acts as an interface that the customer interacts with, but the hidden original Select is what actually used for the form, and your code just makes sure that the options selected in the UI also reflect the generated original Toolset select.

Please consider that this is considered as custom development and we will not be able to give you the code necessary to implement such a feature. We did our best to give you the idea how to implement it.

Thanks.