Range Slider or Scroll Bar in App-Designer?

62 views (last 30 days)
I am plotting data over time and included a zoom function.
Is there any way to display the currently viewed data relatively to the complete data on a slider?
e.g: if my complete data is from 0 to 100 and i zoomed in showing the data from 10:90 it should look like this:
slider2.png
when zoomed in showing the data from 40 to 60 it should look like this:
slider.png
A workaround i found was the range slider documented here: http://undocumentedmatlab.com/blog/sliders-in-matlab-gui
But since i am trying to migrate my GUI to App-Designer the ways described on the page wouldn't work from my understanding
Thank you in advance
  2 Comments
Adam
Adam on 7 Oct 2019
Ranges slider is one of the main java components that I use that I have not seen an equivalent for in App Designer at the moment. Hopefully one will be added, but I suspect the best you can do at the moment is two sliders (or uiknobs) of some description. Someone else may know of a better App Designer approach though.
Till
Till on 9 Oct 2019
Thank you very much, I decided to not use App Designer in the end and just used java components

Sign in to comment.

Accepted Answer

Jasmine Poppick
Jasmine Poppick on 20 Sep 2023
Starting in R2023b, you can create a range slider using the uislider function. The component is also available in the App Designer Component Library.
fig = uifigure;
sld = uislider(fig,"range");

More Answers (2)

Marek Svoboda
Marek Svoboda on 10 Feb 2020
Edited: Marek Svoboda on 10 Feb 2020
For anyone else who is trying to create a functioning range / double / two knob slider in App Designer: Yair's Range Sliders won't work because they use Java, which is not supported by App Designer. I played with it quite a bit and eventually came up with a creative solution that looks like this:
Essentially, it is a line ROI on top of a 1D axis. To implement it, first of all, include a "Panel" in your app GUI. The size of my panel is 40x280 px.
Then in your global properties and methods, you want to initiate the following items, respectively:
properties (Access = private)
ax; % for the axes
l; % for the line
end
methods (Access = private)
% Function that responds to the movement of the sliders
function lMoving(~, source)
% Always keep the position rounded to 1 decimal place
source.Position(1,1) = round(source.Position(1,1),1);
source.Position(2,1) = round(source.Position(2,1),1);
% Add any other action here triggered by the movement of the sliders
end
In the startupFcn, include the following:
% Create the 1D axes
app.ax = axes( ...
app.Panel,'Color','none','YColor','none','XLim',[0,1.5],'YTick',[], ...
'XTick',0:0.5:1.5,'TickDir','both','TickLength',[0.03,0.035],'XMinorTick', ...
'on','Units','pixels','Position',[8,30,264,0] ...
);
% Disable the interactivity & toolbar visibility
disableDefaultInteractivity(app.ax);
app.ax.Toolbar.Visible = 'off';
% Add the line ROI
app.l = images.roi.Line(app.ax,'Position',[0.9,0;1.1,0]);
% Add a listener that will trigger a callback function titled "lMoving" when user
% moves the ROI endpoints or the line ROI as a whole
addlistener(app.l,'MovingROI',@(varargin)lMoving(app,app.l));
Note that this range slider will not show up in the GUI until you actually run the app because it is drawn only as a part of the startupFcn.
In my implementation, I have the slider connected to two Numeric Edit Fields that mutually respond to changes in each other:
Hope you find it helpful!
  10 Comments
Brad Taylor
Brad Taylor on 3 Aug 2023
This is awesome, thanks! Although as mentioned in the previous comment, it does appear to require the Image Processing toolbox.
I made just a couple of improvements:
For this first one, I noticed that it allowed you to very slightly move the markers up and down (maybe 1 pixel). This fixes that, in case you're like me and little things like that bother you.
% Add the line ROI
app.l = images.roi.Line(app.ax,'Position',[0.9,0;1.1,0],'DrawingArea',[0,0,1.5,0]);
Second, this implementation allows you to set the minimum slider greather than or equal to the maximum slider value, which causes MATLAB to throw an error if you're using it to set axis limits. To fix that, I added an additional app parameter which saves the previous position.
properties (Access = private)
ax; % for the axes
l; % for the line
lposprev; % previous line position
end
Then I populate it as the initial position on startup
% Add the line ROI
app.l = images.roi.Line(app.ax,'Position',[0.9,0;1.1,0],'DrawingArea',[0,0,1.5,0]);
app.lposprev = app.l.Position;
Finally, in the lMoving function I added some logic to see which slider is moving and make sure it doesn't equal or go past the other slider.
methods (Access = private)
% Function that responds to the movement of the sliders
function lMoving(~, source)
% Always keep the position rounded to 1 decimal place
source.Position(1,1) = round(source.Position(1,1),1);
source.Position(2,1) = round(source.Position(2,1),1);
% Check limits to ensure the two ends are in the correct order
% and not on top of one another
if app.lprev(1,1) ~= source.Position(1,1) && ...
source.Position(1,1) >= source.Position(2,1)
% Left slider moved past the right one - keep at last valid position
source.Position(1,1) = app.lprev(1,1);
end
if app.lprev(2,1) ~= source.Position(2,1) && ...
source.Position(2,1) <= source.Position(1,1)
% Right slider moved past the left one - keep at last valid position
source.Position(2,1) = app.lprev(2,1);
end
% Add any other action here triggered by the movement of the sliders
end
Peyman Mostafaei
Peyman Mostafaei on 19 Aug 2023
I needed a range slider for my work so I used the provided code here and improved upon it to create a range slider with the tips not getting past each other.
You can access the app here:

Sign in to comment.


Peyman Mostafaei
Peyman Mostafaei on 21 Aug 2023
Edited: Peyman Mostafaei on 21 Aug 2023

Categories

Find more on Develop uifigure-Based Apps in Help Center and File Exchange

Community Treasure Hunt

Find the treasures in MATLAB Central and discover how the community can help you!

Start Hunting!