The Original FileMaker Community
Business Templates - Demo Apps - Video Tutorials -Samples - Help - 46000 Member Forum

The Leading Filemaker Developer Tools

Using jQuery UI in FileMaker – Part 2 – FileMaker Today

Get real time updates directly on you device, subscribe now.

[FMT Connect Link] This is one of favorite articles from Aaron and our partners at the Scarpetta Group on jQuery and how to take your FileMaker Interface to the limit. Hi everyone, this is Aaron, front end web developer at The Scarpetta Group. I am back with part 2 of my series on using jQuery UI in FileMaker. In this tutorial, I am going to explore using the jQuery UI slider control in FileMaker to set a value on a predetermined scale. I will be using FileMaker’s data URL functionality and sending data back to FileMaker using the FMPURL method. For those of you who who have not read it, click to read part 1 of this series to get a preface on some of the techniques I am using to make this happen.

I want to create a slider in FileMaker like the one below. When I interact with this slider, I want to send the selected value back to a FileMaker field. This one will be a quick and easy integration.


So first of all, I need to create our HTML code that will produce the slider control. Sample code can be downloaded from I am working with the “Range with fixed maximum” sample.

Next I will need 3 fields in FileMaker, slider_min, slider_max, slider_selected. I will create a layout with these 3 fields, a webviewer object and a text object to hold our HTML code.

Screen Shot 2014-07-11 at 1.38.12 PM

Now I need to replace a few things in our HTML so that the slider data is replaced with the data I enter into FileMaker fields. In the jQuery function which creates the slider, there is a section that defines the min, max and selected values of the slider.

$( “#slider-range-max” ).slider({ range: “max”, min: 1, max: 10, value: 2, slide: function(…

I need to replace the values with merge variables for the fields we’re using in FileMaker The altered code would look something like this…

$( “#slider-range-max” ).slider({ range: “max”, min: <<slider_min>>, max: <<slider_max>>, value: <<slider_selected>>, slide: function(…

The next piece of this puzzle is to send the selected value data back into FileMaker. Since I am targeting the file that we have open in FileMaker, our URL will be a bit different. I also want this functionality to trigger when I change the slider and I don’t want to have to click a “submit” button. Luckily, many of the jQuery UI controls offer callbacks to do these type things.

In the jQuery slider function, I am going to add an event listener for when the slider has been changed, then we’re going to tell it to send the data to FileMaker one the change event is fired.

 $( “#slider-range-max” ).slider({

range: “max”,

min: << min_value >>,

max: << max_value >>,

value: << slider_value >>,

slide: function( event, ui ) {

$( “#amount” ).val( ui.value );


change: function(event, ui) {


var str = $(‘#amount’).val();

var FMPURL = “fmp://$/YOUR FILENAME?script=YOUR SCRIPT NAME&param=”+str ;

$(‘form’).attr(‘action’, FMPURL );




Finally, I need to create a simple script that will take the value passed from the slider and set the field.

Screen Shot 2014-07-11 at 2.01.47 PM

And that’s it, now I can slide the slider and it changes the data in FileMaker. There are many useful ways this could be implemented. Are you thinking of a solution this would be perfect for? If so, share your thoughts with us. I hope you’ve enjoyed this jQuery UI implementation in FileMaker. Until next time…ciao!

– Aaron

If you have any questions or would like to have assistance implementing these features in your solutions, please contact us at

Aaron Giard

The Scarpetta Group, Inc.

Front End Developer

This email address is being protected from spambots. You need JavaScript enabled to view it.


This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More