- Add custom handle with image

- Add custom handle with custom color - Modification example, adding two new features
TomThorpe · Oct 22, 2015 · f9d3911 · f9d3911
1 parent ca0dd47
commit f9d3911
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 18 deletions.
diff --git a/Example/RangeSliderDemo.xcodeproj/project.pbxproj b/Example/RangeSliderDemo.xcodeproj/project.pbxproj
@@ -14,6 +14,7 @@
 		64495A4F1ACAD93700482D73 /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 64495A4E1ACAD93700482D73 /* Images.xcassets */; };
 		64495A521ACAD93700482D73 /* LaunchScreen.xib in Resources */ = {isa = PBXBuildFile; fileRef = 64495A501ACAD93700482D73 /* LaunchScreen.xib */; };
 		64495A5E1ACAD93700482D73 /* RangeSliderDemoTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 64495A5D1ACAD93700482D73 /* RangeSliderDemoTests.m */; };
+		6BA46D091BD8E1CF0049740C /* custom-handle.png in Resources */ = {isa = PBXBuildFile; fileRef = 6BA46D081BD8E1CF0049740C /* custom-handle.png */; settings = {ASSET_TAGS = (); }; };
 		E06CDBE58BA42330DDAA7756 /* Pods.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = F3B160588054A1ABBEE2B53C /* Pods.framework */; settings = {ATTRIBUTES = (Weak, ); }; };
 /* End PBXBuildFile section */
 
@@ -42,6 +43,7 @@
 		64495A571ACAD93700482D73 /* RangeSliderDemoTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = RangeSliderDemoTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; };
 		64495A5C1ACAD93700482D73 /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
 		64495A5D1ACAD93700482D73 /* RangeSliderDemoTests.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RangeSliderDemoTests.m; sourceTree = "<group>"; };
+		6BA46D081BD8E1CF0049740C /* custom-handle.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = "custom-handle.png"; sourceTree = "<group>"; };
 		E03B9800BFD96602A5FB30A7 /* Pods.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = Pods.debug.xcconfig; path = "Pods/Target Support Files/Pods/Pods.debug.xcconfig"; sourceTree = "<group>"; };
 		F3B160588054A1ABBEE2B53C /* Pods.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; includeInIndex = 0; path = Pods.framework; sourceTree = BUILT_PRODUCTS_DIR; };
 /* End PBXFileReference section */
@@ -105,6 +107,7 @@
 		64495A401ACAD93700482D73 /* RangeSliderDemo */ = {
 			isa = PBXGroup;
 			children = (
+				6BA46D051BD8DCC60049740C /* images */,
 				64495A451ACAD93700482D73 /* AppDelegate.h */,
 				64495A461ACAD93700482D73 /* AppDelegate.m */,
 				64495A481ACAD93700482D73 /* ViewController.h */,
@@ -143,6 +146,14 @@
 			name = "Supporting Files";
 			sourceTree = "<group>";
 		};
+		6BA46D051BD8DCC60049740C /* images */ = {
+			isa = PBXGroup;
+			children = (
+				6BA46D081BD8E1CF0049740C /* custom-handle.png */,
+			);
+			name = images;
+			sourceTree = "<group>";
+		};
 /* End PBXGroup section */
 
 /* Begin PBXNativeTarget section */
@@ -228,6 +239,7 @@
 			files = (
 				64495A4D1ACAD93700482D73 /* Main.storyboard in Resources */,
 				64495A521ACAD93700482D73 /* LaunchScreen.xib in Resources */,
+				6BA46D091BD8E1CF0049740C /* custom-handle.png in Resources */,
 				64495A4F1ACAD93700482D73 /* Images.xcassets in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;

diff --git a/Example/RangeSliderDemo/Base.lproj/LaunchScreen.xib b/Example/RangeSliderDemo/Base.lproj/LaunchScreen.xib
@@ -1,7 +1,8 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="6214" systemVersion="14A314h" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="8191" systemVersion="14F27" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES">
     <dependencies>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="6207"/>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="8154"/>
         <capability name="Constraints with non-1.0 multipliers" minToolsVersion="5.1"/>
     </dependencies>
     <objects>

diff --git a/Example/RangeSliderDemo/Base.lproj/Main.storyboard b/Example/RangeSliderDemo/Base.lproj/Main.storyboard
@@ -1,7 +1,8 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="7706" systemVersion="14E46" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" initialViewController="zoN-NS-23h">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="8191" systemVersion="14F27" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" initialViewController="zoN-NS-23h">
     <dependencies>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="7703"/>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="8154"/>
         <capability name="Constraints to layout margins" minToolsVersion="6.0"/>
     </dependencies>
     <scenes>
@@ -17,7 +18,7 @@
                         <rect key="frame" x="0.0" y="0.0" width="600" height="800"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
                         <subviews>
-                            <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="DwD-4K-U87" customClass="TTRangeSlider">
+                            <view contentMode="scaleToFill" misplaced="YES" translatesAutoresizingMaskIntoConstraints="NO" id="DwD-4K-U87" customClass="TTRangeSlider">
                                 <rect key="frame" x="16" y="160" width="568" height="65"/>
                                 <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="calibratedWhite"/>
                                 <color key="tintColor" red="0.95926036010000004" green="0.14687572130000001" blue="0.021226121880000001" alpha="1" colorSpace="calibratedRGB"/>
@@ -30,25 +31,25 @@
                                     </mask>
                                 </variation>
                             </view>
-                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Standard Range:" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="uv3-Bw-dbz">
-                                <rect key="frame" x="16" y="114" width="129.5" height="20.5"/>
+                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" misplaced="YES" text="Standard Range:" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="uv3-Bw-dbz">
+                                <rect key="frame" x="16" y="114" width="130" height="21"/>
                                 <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                 <color key="textColor" red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="calibratedRGB"/>
                                 <nil key="highlightedColor"/>
                             </label>
-                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="By Tom Thorpe" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="l4E-DD-9aC">
+                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" misplaced="YES" text="By Tom Thorpe" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="l4E-DD-9aC">
                                 <rect key="frame" x="486" y="763" width="98" height="17"/>
                                 <fontDescription key="fontDescription" type="italicSystem" pointSize="14"/>
                                 <color key="textColor" red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="calibratedRGB"/>
                                 <nil key="highlightedColor"/>
                             </label>
-                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Currency Range:" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="auG-6C-UUJ">
-                                <rect key="frame" x="16" y="250" width="129" height="21"/>
+                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" misplaced="YES" text="Currency Range and Custom Handle Color:" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="auG-6C-UUJ">
+                                <rect key="frame" x="16" y="250" width="357" height="21"/>
                                 <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                 <color key="textColor" red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="calibratedRGB"/>
                                 <nil key="highlightedColor"/>
                             </label>
-                            <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="RTp-xv-6Dx" customClass="TTRangeSlider">
+                            <view contentMode="scaleToFill" misplaced="YES" translatesAutoresizingMaskIntoConstraints="NO" id="RTp-xv-6Dx" customClass="TTRangeSlider">
                                 <rect key="frame" x="16" y="296" width="568" height="65"/>
                                 <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="calibratedWhite"/>
                                 <constraints>
@@ -62,13 +63,13 @@
                                     </mask>
                                 </variation>
                             </view>
-                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Custom:" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="WF3-K2-d12">
-                                <rect key="frame" x="16" y="386" width="66" height="21"/>
+                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" misplaced="YES" text="Custom Range and Image Handle:" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="WF3-K2-d12">
+                                <rect key="frame" x="16" y="386" width="316" height="21"/>
                                 <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                 <color key="textColor" red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="calibratedRGB"/>
                                 <nil key="highlightedColor"/>
                             </label>
-                            <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="4yD-aN-v9q" customClass="TTRangeSlider">
+                            <view contentMode="scaleToFill" misplaced="YES" translatesAutoresizingMaskIntoConstraints="NO" id="4yD-aN-v9q" customClass="TTRangeSlider">
                                 <rect key="frame" x="16" y="432" width="568" height="65"/>
                                 <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="calibratedWhite"/>
                                 <color key="tintColor" white="0.33333333333333331" alpha="1" colorSpace="calibratedWhite"/>
@@ -85,13 +86,13 @@
                                     </mask>
                                 </variation>
                             </view>
-                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Currency Range with Step:" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="x8O-3X-6fq">
+                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" misplaced="YES" text="Currency Range with Step:" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="x8O-3X-6fq">
                                 <rect key="frame" x="16" y="522" width="206" height="21"/>
                                 <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                 <color key="textColor" red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="calibratedRGB"/>
                                 <nil key="highlightedColor"/>
                             </label>
-                            <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="o9Y-9Z-GaJ" customClass="TTRangeSlider">
+                            <view contentMode="scaleToFill" misplaced="YES" translatesAutoresizingMaskIntoConstraints="NO" id="o9Y-9Z-GaJ" customClass="TTRangeSlider">
                                 <rect key="frame" x="16" y="568" width="568" height="65"/>
                                 <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="calibratedWhite"/>
                                 <constraints>

diff --git a/Example/RangeSliderDemo/ViewController.m b/Example/RangeSliderDemo/ViewController.m
@@ -33,6 +33,7 @@ - (void)viewDidLoad {
     self.rangeSliderCurrency.maxValue = 150;
     self.rangeSliderCurrency.selectedMinimum = 50;
     self.rangeSliderCurrency.selectedMaximum = 150;
+    self.rangeSliderCurrency.handleWithColor = [UIColor greenColor];
     NSNumberFormatter *formatter = [[NSNumberFormatter alloc] init];
     formatter.numberStyle = NSNumberFormatterCurrencyStyle;
     self.rangeSliderCurrency.numberFormatterOverride = formatter;
@@ -43,6 +44,7 @@ - (void)viewDidLoad {
     self.rangeSliderCustom.maxValue = 100;
     self.rangeSliderCustom.selectedMinimum = 40;
     self.rangeSliderCustom.selectedMaximum = 60;
+    self.rangeSliderCustom.handleWithImage = [UIImage imageNamed:@"custom-handle"];
     NSNumberFormatter *customFormatter = [[NSNumberFormatter alloc] init];
     customFormatter.positiveSuffix = @"B";
     self.rangeSliderCustom.numberFormatterOverride = customFormatter;

diff --git a/Example/RangeSliderDemo/custom-handle.png b/Example/RangeSliderDemo/custom-handle.png
diff --git a/Pod/Classes/TTRangeSlider.h b/Pod/Classes/TTRangeSlider.h
@@ -72,4 +72,14 @@ IB_DESIGNABLE
  */
 @property (nonatomic, assign) IBInspectable float step;
 
+/**
+ *Hendle slider with custom image, you can set custom image for your hendle
+ */
+@property (nonatomic, strong) UIImage *handleWithImage;
+
+/**
+ *Hendle slider with custom color, you can set custom color for your hendle
+ */
+@property (nonatomic, strong) UIColor *handleWithColor;
+
 @end
diff --git a/Pod/Classes/TTRangeSlider.m b/Pod/Classes/TTRangeSlider.m
@@ -396,8 +396,6 @@ -(void)setTintColor:(UIColor *)tintColor{
     [CATransaction setAnimationDuration:0.5];
     [CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut] ];
     self.sliderLine.backgroundColor = color;
-    self.leftHandle.backgroundColor = color;
-    self.rightHandle.backgroundColor = color;
 
     if (self.minLabelColour == nil){
         self.minLabel.foregroundColor = color;
@@ -470,4 +468,23 @@ -(void)setNumberFormatterOverride:(NSNumberFormatter *)numberFormatterOverride{
     [self updateLabelValues];
 }
 
+-(void)setHandleWithImage:(UIImage *)handleWithImage{
+
+    CGRect startFrame = CGRectMake(0.0, 0.0, 31, 32);
+    self.leftHandle.contents = (id)handleWithImage.CGImage;
+    self.leftHandle.frame = startFrame;
+
+    self.rightHandle.contents = (id)handleWithImage.CGImage;
+    self.rightHandle.frame = startFrame;
+
+    //Force layer background to transparant
+    self.leftHandle.backgroundColor = [[UIColor clearColor] CGColor];
+    self.rightHandle.backgroundColor = [[UIColor clearColor] CGColor];
+}
+
+-(void)setHandleWithColor:(UIColor *)handleWithColor{
+    self.leftHandle.backgroundColor = [handleWithColor CGColor];
+    self.rightHandle.backgroundColor = [handleWithColor CGColor];
+}
+
 @end