Two knob slider for a GUI or app

Asked by Raptrick on 26 Jan 2018

Latest activity Commented on by Royi Avital on 27 Jul 2018

95 views (last 30 days)

Hello,

For sorting out timing events I need a slider with two knobs, see picture taken from internet. Anyone a suggestion or a trick how implement this (UIspace) efficient in a matlab UI or App. Now it is implemented with two sliders: one for the min value and one for the max value. This is not so space efficient when you need of 10 these slider pairs.

Thanks,

Patrick

1 Comment

Adam on 26 Jan 2018

If you want to go a little 'off-piste', you can use a Java range slider as detailed in Yair Altman's blog post:

http://undocumentedmatlab.com/blog/sliders-in-matlab-gui

I have used these a few times. I created a class to handle it, but you can just put the raw code in for single usage easily enough.

2 Answers

Link

Answer by Raptrick on 28 Jan 2018

Accepted Answer

Thanks Adam and Peter for your suggestions. I build the following code, had some troubles to find the position properties of the RangeSlider. So this is what I need...

Patrick

function tryoutrangeslider2
Labels = {'January','February','March','April','May'};
Mins = [1 1 1 1 1];
Maxs = [31 28 31 30 31];
hF = figure;
for i=1:length(Labels)
    % more direct instantiation
    % jRS = com.jidesoft.swing.RangeSlider(0,100,20,70); %min,max,low,high
    % [jRangeSlider{i}, hRangeSlider{i}] = javacomponent(jRS,[0,0,200,80],hF);%posx,posy,width,height
      jRS = com.jidesoft.swing.RangeSlider;
      [jRangeSlider{i}, hRangeSlider{i}] = javacomponent(jRS,[],hF);
      % modify rangeslider position
      set(hRangeSlider{i},'Position',[100,11+(i-1)*80,200,80])
      % modify range slider properties
      set(jRangeSlider{i},'Maximum',Maxs(i),...
          'Minimum',Mins(i),...
          'LowValue',10,...
          'HighValue',20,...
          'Name',Labels{i},...
          'MajorTickSpacing',5,...
          'MinorTickSpacing',1, ...
          'PaintTicks',true,...
          'PaintLabels',true, ...
          'StateChangedCallback',{@jRangeSlider_Callback,i});
      % add text label
      uicontrol(hF,'Style','Text','Position',[5,53+(i-1)*80,100,15],'String',Labels{i})
  end
end
function jRangeSlider_Callback(jRangeSlider,event,i)
   disp([jRangeSlider.Name ' ,extra parameter =' num2str(i)])
end

1 Comment

Royi Avital on 27 Jul 2018

Is there a way to create 3 knobs slider like that?

Link

Answer by Peter Cook on 26 Jan 2018

Edited by Peter Cook on 26 Jan 2018

I have dabbled with this a couple times myself. As Adam mentioned, you could use a range slider, but what if you want multiple thumbs? You've got options.

1. Use multiple thumbs. Here's an example I sandboxed awhile back:

hFig1 = figure('pos',[64,64,768,128]);
hFig1.ToolBar = 'none';
hFig1.MenuBar = 'none';
hFig1.Name = 'Select Frequency Range(s) in Hz';
hFig1.NumberTitle = 'off';
sliderWidth = 32;
for k = 1:20
    jSlider{k} = javax.swing.JSlider;
    jSlider{k}.setOpaque(false);
    javacomponent(jSlider{k},[sliderWidth*(k-1),32,1.5*sliderWidth,45]);
    sliderMin = 2*(k-1);
    sliderValue = 2*k-1;
    sliderMax = 2*k;
    set(jSlider{k},'Value',sliderValue,...
        'MajorTickSpacing',1,...
        'PaintLabels',true,...
        'PaintTicks',true,...
        'Minimum',sliderMin,...
        'Maximum',sliderMax);
    hjSlider{k} = handle(jSlider{k},'CallbackProperties');
    hjSlider{k}.StateChangedCallback = @(hjSlider,eventData) disp(get(hjSlider,'Value'));
      labelTable = java.util.Hashtable();
      sliderValueLabel = sprintf('<html>10<sup>%0.1f</sup></html>',sliderValue/10);
      jLabel = javax.swing.JLabel(sliderValueLabel);
      jLabel.setFont(java.awt.Font('Tahona',0,8));
      labelTable.put(int32(sliderValue), jLabel);
      jSlider{k}.setLabelTable( labelTable );
end

2. If you're savvy at programming & whatnot, you could extend this object (colormapeditor) to suit your needs:

com.mathworks.page.cmapeditor.CMEditView

3. Do a github search for multislider.java for a pre-built class that does this.

1 Comment

Royi Avital on 27 Jul 2018

Your code creates multiple sliders not one with multiple knobs.

You are now following this question

Raptrick (view profile)