Range Slider or Scroll Bar in App-Designer?

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:

when zoomed in showing the data from 40 to 60 it should look like this:

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

[Adam]

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]

Thank you very much, I decided to not use App Designer in the end and just used java components

Answer 1

[Jasmine Poppick]

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");

Answer 2

[Marek Svoboda]

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!

[Stephen23]

+1 very innovative idea.

[Johannes]

That is really a great implementation!

I have one question as the slider triggers some intensive calculations in my application. Is it possible to execute the associated function after the slider is moved (and not while it is moved)?

[Marek Svoboda]

@Johannes I just used the 'live' updates to the coordinates because it provided better feedback to the user, but yes - as described on the help page for the images.roi.Line() function, section "Set Up Listeners for Line ROI Events," you'd just switch

'MovingROI'

for

'ROIMoved'

and I believe everything else should stay the same!

[Jessica Angulo Capel]

It was really useful! Thank you :)

[Haley Nesmith]

I agree with Jessica - super helpful! Thanks so much for sharing Marek!

[Jessica Angulo Capel]

Is there a way to allow the change of the position of the line with your mouse wheel? Maybe this is being a bit two picky with a self-created component, but would be really cool!!

[Marek Svoboda]

@Jessica Angulo Capel This might be possible - I don't have the exact code handy, but there are definitely ways to assign keyboard input and so maybe a mouse wheel might work as well. More info on the KeyPressFcn here:

https://www.mathworks.com/help/matlab/ref/matlab.ui.figureappd-properties.html

Just note that, from what I remember when I was looking into keyboard input, the app needs to be active (i.e., alrady previously selected/clicked on) for any keyboard input to work:

"This callback function executes when the user presses a key while UI figure or a child component has focus."

Also, in order to make this callback work, you may need to figure out the specific name of the keyboard/mouse button that you eventually want to be the trigger. For that, as a test, I recommend setting this callback to simply print the key name into a text field as you are pressing various keyboard keys. (Hope this makes sense! :))

[Karuna Mudliyar]

Does it require Image Processing toolbox

[Brad Taylor]

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]

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:

https://uk.mathworks.com/matlabcentral/fileexchange/134082-slider-with-two-tips-range-slider

Answer 3

[Peyman Mostafaei]

To expnad my answer, I have created two other types of range slider which one of them is exactly what you look for.

Go ahead and use them:

1- https://uk.mathworks.com/matlabcentral/fileexchange/134082-slider-with-two-tips-range-slider

2- https://uk.mathworks.com/matlabcentral/fileexchange/134112-range-slider-for-maltab-app-designer

3- https://uk.mathworks.com/matlabcentral/fileexchange/134117-scroll-bar-for-maltab-app-designer