diff --git a/Example/HGCircularSlider/Base.lproj/Main.storyboard b/Example/HGCircularSlider/Base.lproj/Main.storyboard
index 481e1b0..55b8523 100755
--- a/Example/HGCircularSlider/Base.lproj/Main.storyboard
+++ b/Example/HGCircularSlider/Base.lproj/Main.storyboard
@@ -1,12 +1,11 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="12118" systemVersion="16A323" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" colorMatched="YES" initialViewController="sp2-vV-rZV">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="14460.31" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" colorMatched="YES" initialViewController="sp2-vV-rZV">
     <device id="retina4_7" orientation="portrait">
         <adaptation id="fullscreen"/>
     </device>
     <dependencies>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="12086"/>
-        <capability name="Aspect ratio constraints" minToolsVersion="5.1"/>
-        <capability name="Constraints to layout margins" minToolsVersion="6.0"/>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14460.20"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <scenes>
@@ -154,7 +153,7 @@
                 </viewController>
                 <placeholder placeholderIdentifier="IBFirstResponder" id="IfT-Jw-FAY" userLabel="First Responder" sceneMemberID="firstResponder"/>
             </objects>
-            <point key="canvasLocation" x="-1254.5" y="2467.5"/>
+            <point key="canvasLocation" x="-2007.2" y="2219.6401799100449"/>
         </scene>
         <!--Tab Bar Controller-->
         <scene sceneID="M9S-pb-Waq">
@@ -177,7 +176,7 @@
                 </tabBarController>
                 <placeholder placeholderIdentifier="IBFirstResponder" id="gDj-DB-klF" userLabel="First Responder" sceneMemberID="firstResponder"/>
             </objects>
-            <point key="canvasLocation" x="-327" y="1633"/>
+            <point key="canvasLocation" x="-523.20000000000005" y="1468.9655172413795"/>
         </scene>
         <!--Player-->
         <scene sceneID="90r-0D-nKE">
@@ -290,7 +289,7 @@
                 </viewController>
                 <placeholder placeholderIdentifier="IBFirstResponder" id="LfZ-7G-N6b" userLabel="First Responder" sceneMemberID="firstResponder"/>
             </objects>
-            <point key="canvasLocation" x="-794" y="2468"/>
+            <point key="canvasLocation" x="-1270.4000000000001" y="2220.089955022489"/>
         </scene>
         <!--Example-->
         <scene sceneID="stQ-nu-pyE">
@@ -382,7 +381,7 @@
                 </viewController>
                 <placeholder placeholderIdentifier="IBFirstResponder" id="11N-ZE-qqz" userLabel="First Responder" sceneMemberID="firstResponder"/>
             </objects>
-            <point key="canvasLocation" x="-326" y="2468"/>
+            <point key="canvasLocation" x="-521.60000000000002" y="2220.089955022489"/>
         </scene>
         <!--OClock-->
         <scene sceneID="qvZ-oN-u0x">
@@ -584,7 +583,7 @@
                 </viewController>
                 <placeholder placeholderIdentifier="IBFirstResponder" id="4jZ-R1-SB1" userLabel="First Responder" sceneMemberID="firstResponder"/>
             </objects>
-            <point key="canvasLocation" x="148" y="2468"/>
+            <point key="canvasLocation" x="236.80000000000001" y="2220.089955022489"/>
         </scene>
         <!--Circular-->
         <scene sceneID="EVO-nS-JTv">
@@ -602,7 +601,7 @@
                                 <rect key="frame" x="46" y="152" width="283" height="283"/>
                                 <subviews>
                                     <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Rounds" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="eTZ-Q0-WV1">
-                                        <rect key="frame" x="111" y="131.5" width="62" height="20.5"/>
+                                        <rect key="frame" x="110.5" y="131.5" width="62" height="20.5"/>
                                         <fontDescription key="fontDescription" type="boldSystem" pointSize="17"/>
                                         <color key="textColor" red="0.1843137255" green="0.21960784310000001" blue="0.53725490200000003" alpha="1" colorSpace="calibratedRGB"/>
                                         <nil key="highlightedColor"/>
@@ -651,6 +650,8 @@
                                     <userDefinedRuntimeAttribute type="color" keyPath="diskColor">
                                         <color key="value" white="0.0" alpha="0.0" colorSpace="calibratedWhite"/>
                                     </userDefinedRuntimeAttribute>
+                                    <userDefinedRuntimeAttribute type="boolean" keyPath="rotatesThumb" value="YES"/>
+                                    <userDefinedRuntimeAttribute type="image" keyPath="endThumbImage" value="arrow_thumb"/>
                                 </userDefinedRuntimeAttributes>
                             </view>
                             <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" alignment="top" translatesAutoresizingMaskIntoConstraints="NO" id="KXq-jq-I0O">
@@ -736,20 +737,16 @@
                 </viewController>
                 <placeholder placeholderIdentifier="IBFirstResponder" id="ijD-qf-fmt" userLabel="First Responder" sceneMemberID="firstResponder"/>
             </objects>
-            <point key="canvasLocation" x="643" y="2468"/>
+            <point key="canvasLocation" x="1028.8" y="2220.089955022489"/>
         </scene>
     </scenes>
     <resources>
         <image name="Hours" width="219" height="219"/>
+        <image name="arrow_thumb" width="36" height="36"/>
         <image name="first" width="30" height="30"/>
         <image name="ic_bedtime" width="17" height="19"/>
         <image name="ic_wake" width="13" height="16"/>
         <image name="second" width="30" height="30"/>
         <image name="time_indicators" width="301" height="300"/>
     </resources>
-    <simulatedMetricsContainer key="defaultSimulatedMetrics">
-        <simulatedStatusBarMetrics key="statusBar"/>
-        <simulatedOrientationMetrics key="orientation"/>
-        <simulatedScreenMetrics key="destination" type="retina4_7.fullscreen"/>
-    </simulatedMetricsContainer>
 </document>
diff --git a/Example/HGCircularSlider/Images.xcassets/AppIcon.appiconset/Contents.json b/Example/HGCircularSlider/Images.xcassets/AppIcon.appiconset/Contents.json
index b8236c6..19882d5 100755
--- a/Example/HGCircularSlider/Images.xcassets/AppIcon.appiconset/Contents.json
+++ b/Example/HGCircularSlider/Images.xcassets/AppIcon.appiconset/Contents.json
@@ -39,6 +39,11 @@
       "idiom" : "iphone",
       "size" : "60x60",
       "scale" : "3x"
+    },
+    {
+      "idiom" : "ios-marketing",
+      "size" : "1024x1024",
+      "scale" : "1x"
     }
   ],
   "info" : {
diff --git a/Example/HGCircularSlider/Images.xcassets/arrow_thumb.imageset/Contents.json b/Example/HGCircularSlider/Images.xcassets/arrow_thumb.imageset/Contents.json
new file mode 100644
index 0000000..37dddad
--- /dev/null
+++ b/Example/HGCircularSlider/Images.xcassets/arrow_thumb.imageset/Contents.json
@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "arrow_thumb.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
\ No newline at end of file
diff --git a/Example/HGCircularSlider/Images.xcassets/arrow_thumb.imageset/arrow_thumb.png b/Example/HGCircularSlider/Images.xcassets/arrow_thumb.imageset/arrow_thumb.png
new file mode 100644
index 0000000..54f3227
Binary files /dev/null and b/Example/HGCircularSlider/Images.xcassets/arrow_thumb.imageset/arrow_thumb.png differ
diff --git a/HGCircularSlider/Classes/CircularSlider+Draw.swift b/HGCircularSlider/Classes/CircularSlider+Draw.swift
index 29fe75d..d1772af 100644
--- a/HGCircularSlider/Classes/CircularSlider+Draw.swift
+++ b/HGCircularSlider/Classes/CircularSlider+Draw.swift
@@ -125,14 +125,23 @@ extension CircularSlider {
      - returns: return the origin point of the thumb
      */
     @discardableResult
-    internal func drawThumb(withImage image: UIImage, angle: CGFloat, inContext context: CGContext) -> CGPoint {
+    internal func drawThumb(withImage image: UIImage, angle: CGFloat, inContext context: CGContext, rotate: Bool) -> CGPoint {
         UIGraphicsPushContext(context)
         context.beginPath()
         let circle = Circle(origin: bounds.center, radius: self.radius)
         let thumbOrigin = CircularSliderHelper.endPoint(fromCircle: circle, angle: angle)
         let imageSize = image.size
         let imageFrame = CGRect(x: thumbOrigin.x - (imageSize.width / 2), y: thumbOrigin.y - (imageSize.height / 2), width: imageSize.width, height: imageSize.height)
+        if rotate {
+            context.saveGState()
+            context.translateBy(x: imageFrame.center.x, y: imageFrame.center.y)
+            context.rotate(by: angle)
+            context.translateBy(x: -imageFrame.center.x, y: -imageFrame.center.y)
+        }
         image.draw(in: imageFrame)
+        if rotate {
+            context.restoreGState()
+        }
         UIGraphicsPopContext()
 
         return thumbOrigin
diff --git a/HGCircularSlider/Classes/CircularSlider.swift b/HGCircularSlider/Classes/CircularSlider.swift
index ca90b5a..5476398 100644
--- a/HGCircularSlider/Classes/CircularSlider.swift
+++ b/HGCircularSlider/Classes/CircularSlider.swift
@@ -126,6 +126,7 @@ open class CircularSlider: UIControl {
      *
      * The default value of this property is nil
      */
+    @IBInspectable
     open var endThumbImage: UIImage?
     
     // MARK: Accessing the Slider’s Value Limits
@@ -172,6 +173,16 @@ open class CircularSlider: UIControl {
         }
     }
     
+    /**
+     * When set to true, thumb image will rotate when the value changes.
+     */
+    @IBInspectable
+    open var rotatesThumb: Bool = false {
+        didSet {
+            setNeedsDisplay()
+        }
+    }
+    
     /**
      * The value of the endThumb (changed when the user change the position of the end thumb)
      *
@@ -265,7 +276,7 @@ open class CircularSlider: UIControl {
             drawThumb(withAngle: endAngle, inContext: context)
             return
         }
-        drawThumb(withImage: image, angle: endAngle, inContext: context)
+        drawThumb(withImage: image, angle: endAngle, inContext: context, rotate: rotatesThumb)
     }
     
     // MARK: User interaction methods
diff --git a/HGCircularSlider/Classes/MidPointCircularSlider.swift b/HGCircularSlider/Classes/MidPointCircularSlider.swift
index f30c2e6..96f80c6 100755
--- a/HGCircularSlider/Classes/MidPointCircularSlider.swift
+++ b/HGCircularSlider/Classes/MidPointCircularSlider.swift
@@ -121,7 +121,7 @@ open class MidPointCircularSlider: RangeCircularSlider {
            drawThumb(withAngle: midAngle, inContext: context)
             return
         }
-        drawThumb(withImage: image, angle: midAngle, inContext: context)
+        drawThumb(withImage: image, angle: midAngle, inContext: context, rotate: rotatesThumb)
     }
     
     // MARK: User interaction methods
diff --git a/HGCircularSlider/Classes/RangeCircularSlider.swift b/HGCircularSlider/Classes/RangeCircularSlider.swift
index e2a31f6..94621c8 100644
--- a/HGCircularSlider/Classes/RangeCircularSlider.swift
+++ b/HGCircularSlider/Classes/RangeCircularSlider.swift
@@ -237,7 +237,7 @@ open class RangeCircularSlider: CircularSlider {
         (isHighlighted == true && selectedThumb == .endThumb) ? endThumbStrokeHighlightedColor.setStroke() : endThumbStrokeColor.setStroke()
         endThumbCenter = drawThumb(withAngle: endAngle, inContext: context)
         if let image = endThumbImage {
-            endThumbCenter = drawThumb(withImage: image, angle: endAngle, inContext: context)
+            endThumbCenter = drawThumb(withImage: image, angle: endAngle, inContext: context, rotate: rotatesThumb)
         }
         
         // start thumb
@@ -246,7 +246,7 @@ open class RangeCircularSlider: CircularSlider {
 
         startThumbCenter = drawThumb(withAngle: startAngle, inContext: context)
         if let image = startThumbImage {
-            startThumbCenter = drawThumb(withImage: image, angle: startAngle, inContext: context)
+            startThumbCenter = drawThumb(withImage: image, angle: startAngle, inContext: context, rotate: rotatesThumb)
         }
     }