How to get the center of the thumb image of UISlider

uislider thumb image
slider thumb image swift
custom uislider swift
uislider thumb text
uislider custom image
uislider touch events swift
change slider height swift
uislider border

I'm creating a custom UISlider to test out some interface ideas. Mostly based around making the thumb image larger.

I found out how to do that, like so:

UIImage *thumb = [UIImage imageNamed:@"newThumbImage_64px.png"];  
[self.slider setThumbImage:thumb forState:UIControlStateNormal];  
[self.slider setThumbImage:thumb forState:UIControlStateHighlighted];  
[thumb release];  

To calculate a related value I need to know where the center point of the thumb image falls when it's being manipulated. And the point should be in it's superview's coordinates.

Looking at the UISlider docs, I didn't see any property that tracked this.

Is there some easy way to calculate this or can it be derived from some existing value(s)?

This will return the correct X position of center of thumb image of UISlider in view coordinates:

- (float)xPositionFromSliderValue:(UISlider *)aSlider {
     float sliderRange = aSlider.frame.size.width - aSlider.currentThumbImage.size.width;
     float sliderOrigin = aSlider.frame.origin.x + (aSlider.currentThumbImage.size.width / 2.0);

     float sliderValueToPixels = (((aSlider.value - aSlider.minimumValue)/(aSlider.maximumValue - aSlider.minimumValue)) * sliderRange) + sliderOrigin;

     return sliderValueToPixels;
}

Put it in your view controller and use it like this: (assumes property named slider)

float x = [self xPositionFromSliderValue:self.slider];

thumbRect(forBounds:trackRect:value:), thumbRect(forBounds:trackRect:value:) Returns the drawing rectangle for the slider's thumb image. SDKs. iOS 2.0+; Mac Catalyst 13.0+. Framework. UIKit. The active control state determines which thumb image is stored in this property. To get the thumb image for a different control state, use the thumb Image(for:) method. If no custom thumb images have been set using the set Thumb Image(_: for:) method, this property is nil. In that situation, the slider uses the default thumb image for drawing.

I tried this after reading the above suggestion -

yourLabel = [[UILabel alloc]initWithFrame:....];

//Call this method on Slider value change event

-(void)sliderValueChanged{
    CGRect trackRect = [self.slider trackRectForBounds:self.slider.bounds];
    CGRect thumbRect = [self.slider thumbRectForBounds:self.slider.bounds
                               trackRect:trackRect
                                   value:self.slider.value];

    yourLabel.center = CGPointMake(thumbRect.origin.x + self.slider.frame.origin.x,  self.slider.frame.origin.y - 20);
}

For Swift version

func sliderValueChanged() -> Void {
        let trackRect =  self.slider.trackRect(forBounds: self.slider.bounds)
        let thumbRect = self.slider.thumbRect(forBounds: self.slider.bounds, trackRect: trackRect, value: self.slider.value)
        yourLabel.center = CGPoint(x: thumbRect.origin.x + self.slider.frame.origin.x + 30, y: self.slider.frame.origin.y - 60)
    }

I could get most accurate value by using this snippet.

Fix for centering thumb image when rotating UISlider 90 degrees to , in IB under User Defined Runtime Attibutes for the UISlider. However, this makes it visually obvious that iOS does not draw the thumb image. over the center of  Fix for centering thumb image when rotating UISlider 90 degrees to a vertical orientation UISlider controls can be rotated to a vertical orientation with this setting: layer.transform.rotation.z = 1.570795 (type = String) in IB under User Defined Runtime Attibutes for the UISlider.

Swift 3

extension UISlider {
    var thumbCenterX: CGFloat {
        let trackRect = self.trackRect(forBounds: frame)
        let thumbRect = self.thumbRect(forBounds: bounds, trackRect: trackRect, value: value)
        return thumbRect.midX
    }
}

1.7. Customizing the UISlider, I have broken it down into its different UI components in Figure 1-20. The following sample code instantiates a UISlider and places it at the center of the view of the view controller The image for the track of the slider to the right of the thumb. The thumb image associated with the specified state, or nil if an appropriate image could not be retrieved. This method might return nil if you specify multiple control states in the state parameter. For a description of track and thumb images, see Customizing the Slider’s Appearance.

I would like to know why none of you provide the simplest answer which consist in reading the manual. You can compute all these values accurately and also MAKING SURE THEY STAY THAT WAY, by simply using the methods:

- (CGRect)trackRectForBounds:(CGRect)bounds
- (CGRect)thumbRectForBounds:(CGRect)bounds trackRect:(CGRect)rect value:(float)value

which you can easily find in the developer documentation.

If thumb image changes and you want to change how it's positioned, you subclass and override these methods. The first one gives you the rectangle in which the thumb can move the second one the position of the thumb itself.

The iPhone Developer's Cookbook: Building Applications with the , Image:Context [] . return the Image; } // Update the thumb images as needed - (​void) update. (UISlider *) aSlider { aSlider. frame = thumb|Frame; aSlider.​center = CGPointMake [15]. Of) ; Get This Recipe's Code To get the code used for. The appearance of sliders is configurable; you can tint the track and the thumb, and provide images to appear at the ends of the slider. You can add sliders to your interface programmatically or by using Interface Builder. Figure 1 shows the terms used to describe the constituent parts of a UISlider object in a left-to-right configuration. Figure 1

It's better to use -[UIView convertRect:fromView:] method instead. It's cleaner and easier without any complicated calculations:

- (IBAction)scrub:(UISlider *)sender
{
    CGRect _thumbRect = [sender thumbRectForBounds:sender.bounds
                                        trackRect:[sender trackRectForBounds:sender.bounds]
                                            value:sender.value];
    CGRect thumbRect = [self.view convertRect:_thumbRect fromView:sender];

    // Use the rect to display a popover (pre iOS 8 code)
    [self.popover dismissPopoverAnimated:NO];
    self.popover = [[UIPopoverController alloc] initWithContentViewController:[UIViewController new]];
    [self.popover presentPopoverFromRect:thumbRect inView:self.view
                permittedArrowDirections:UIPopoverArrowDirectionDown|UIPopoverArrowDirectionUp animated:YES];
}

How to personalize and use UISlider in Swift - iOS App , Now that we have the screen ready, we want to change our slider to look like this: How we But wait a minute, the thumb… is an image?!? From the image it seems that the thumb is in the center. However, you can try to set HorizontalAlignment of the thumb (ellipse) to Center. If this does not help, could you please send us a sample project with your implementation and customization and maybe images with actual and expected result so that we can help you further.

The iOS 4 Developer's Cookbook: Core Concepts and Essential , create a new custom thumb image and use it for the highlighted state UIImage *​customimg = [self (void) startDrag: (UISlider *) aSlider { aSlider.frame = thumbFrame; aSlider.center = CGPointMake(self.view.center.x Get This Recipe's Code. To center an image, set left and right margin to auto and make it into a block element:

Custom UISlider using Swift Language, You can customise colour, height, thumb image, minimum track and maximum track. For this you need to make a custom class of the UISlider controller there is one custom method to set the label in the center of the thumb  Use this method to define the position of the thumb when the application starts. Two Boolean methods, setShowTickMarks and setShowTickLabels , define the visual appearance of the slider. In Example 16-1 , the marks and labels are enabled.

The IOS 5 Developer's Cookbook: Core Concepts and Essential , INSET_AMT)); CGContextStrokePath(context); // Retrieve the thumb UIImage the thumb images as needed - { (void) updateThumb: (UISlider *) aSlider // Only (void) loadView CGPoint p = [touch locationInView:self]; // Center point of view​  Increasing a thumbs “click area” in UISlider (4) I am creating a custom UISlider and wonder, how do you increase a thumb image's "click area" ? The code below works great, except the thumb's "click area" remains unchanged. If I am not wrong, I believe the standard thumb area is 19 px ?

Comments
  • this works for me, except for needing one change to allow for sliders with custom min/max values: float sliderValueToPixels = (aSlider.value/aSlider.maximumValue * sliderRange) + sliderOrigin; Also, it is called like so: float x = [self xPositionFromSliderValue:someSlider];
  • Perfect in combination with James's modification
  • Actually in order to accomodate a custom minimum value that is not 0 (or close to it), you'll need to change it to: float sliderValueToPixels = (((aSlider.value-aSlider.minimumValue)/(aSlider.maximumValue-aSlider.minimumValue)) * sliderRange) + sliderOrigin;
  • Thanks Joel! Your additional code helped me because I had a custom min and max value.
  • This method broke for me in iOS 7. The answer below that uses thumbRectForBounds::: works perfectly for me in both iOS 6 & 7.
  • Awesome! You saved my life...
  • This is definetive THE answer! Just update a member variable containing the return value of [super trackRectForBounds] and you can skip all the calculations. Excellent!
  • Documentation says for both of these methods: "You should not call this method directly."
  • This is the definitive answer. No need to subclass UISlider. Thanks you
  • Assuming slider range 0..1, your point is correct when the slider.value is 0, but gets more off as slider.value changes. Also, there's a typo in the x equation.
  • Also, shouldn't sliderFrame.x be sliderFrame.origin.x & sliderFrame.size.width?
  • Oops, sorry about the typo, fixed.
  • Still not getting the right value. When testing, I'm setting a transparent view's center point using your computed x,y point.
  • Upon further testing, it appears there's a 1-4px adjustment, depending on where on the slider you are. I've posted my test code here: dl.dropbox.com/u/85235/ThumbTest.zip. Using it and xScope, you can play around and find the exact values.