diff --git a/data/themes/Makefile.am b/data/themes/Makefile.am
index ad02581e2..ae365488e 100644
--- a/data/themes/Makefile.am
+++ b/data/themes/Makefile.am
@@ -156,6 +156,10 @@ img/clock_ss5.png \
 img/clock_ss6.png \
 img/clock_ss7.png \
 img/clock_ss.png \
+img/col_sel_end_bottom.png \
+img/col_sel_end_left.png \
+img/col_sel_end_right.png \
+img/col_sel_end_top.png \
 img/darken_rounded_square.png \
 img/diagonal_stripes.png \
 img/digit_0.png \
diff --git a/data/themes/edc/cslider.edc b/data/themes/edc/cslider.edc
index 3a35a4561..ca2777f7e 100644
--- a/data/themes/edc/cslider.edc
+++ b/data/themes/edc/cslider.edc
@@ -1,6 +1,10 @@
 group { name: "e/widgets/cslider";
    images.image: "inset_shadow.png" COMP;
    images.image: "bevel_in.png" COMP;
+   images.image: "col_sel_end_bottom.png" COMP;
+   images.image: "col_sel_end_top.png" COMP;
+   images.image: "col_sel_end_left.png" COMP;
+   images.image: "col_sel_end_right.png" COMP;
    parts {
       part { name: "bg"; type: RECT;
          description { state: "default" 0.0;
@@ -32,22 +36,16 @@ group { name: "e/widgets/cslider";
          dragable.x: 1 1 0;
          dragable.y: -1 1 0;
          description { state: "default" 0.0;
-            min: 1 99999;
-            max: 1 99999;
+            min: 1 1;
+            max: 1 1;
             fixed: 1 1;
+            visible: 0;
             rel1.to: "e.swallow.content";
             rel1.relative: 0.5 0.0;
             rel2.to: "e.swallow.content";
-            rel2.relative: 0.5 1.0;
+            rel2.relative: 0.5 0.5;
             color: 255 255 255 150;
          }
-         description { state: "vertical" 0.0;
-            inherit: "default" 0.0;
-            min: 99999 1;
-            max: 99999 1;
-            rel1.relative: 0.0 0.5;
-            rel2.relative: 1.0 0.5;
-         }
       }
       part { name: "shadow"; mouse_events: 0;
          description { state: "default" 0.0;
@@ -60,6 +58,54 @@ group { name: "e/widgets/cslider";
             color: 255 255 255 128;
          }
       }
+      part { name: "end1"; mouse_events: 0;
+         clip_to: "clipper";
+         description { state: "default" 0.0;
+            image.normal: "col_sel_end_top.png";
+            FIXED_SIZE(11, 8)
+            align: 0.5 0.0;
+            rel1.to: "cursor";
+            rel2.to: "cursor";
+         }
+         description { state: "vertical" 0.0;
+            inherit: "default" 0.0;
+            image.normal: "col_sel_end_left.png";
+            FIXED_SIZE(8, 11)
+            align: 0.0 0.5;
+         }
+      }
+      part { name: "end2"; mouse_events: 0;
+         clip_to: "clipper";
+         description { state: "default" 0.0;
+            image.normal: "col_sel_end_bottom.png";
+            FIXED_SIZE(11, 8)
+            align: 0.5 1.0;
+            rel1.to: "cursor";
+            rel2.to: "cursor";
+         }
+         description { state: "vertical" 0.0;
+            inherit: "default" 0.0;
+            image.normal: "col_sel_end_right.png";
+            FIXED_SIZE(8, 11)
+            align: 1.0 0.5;
+         }
+      }
+      part { name: "cursor"; type: RECT; mouse_events: 0;
+         description { state: "default" 0.0;
+            rel1.to_x: "e.dragable.cursor";
+            rel1.to_y: "e.swallow.content";
+            rel2.to_x: "e.dragable.cursor";
+            rel2.to_y: "e.swallow.content";
+            color: 255 255 255 150;
+         }
+         description { state: "vertical" 0.0;
+            inherit: "default" 0.0;
+            rel1.to_x: "e.swallow.content";
+            rel1.to_y: "e.dragable.cursor";
+            rel2.to_x: "e.swallow.content";
+            rel2.to_y: "e.dragable.cursor";
+         }
+      }
       part { name: "inset"; mouse_events: 0;
          description { state: "default" 0.0;
             image.normal: "bevel_in.png";
@@ -77,8 +123,9 @@ group { name: "e/widgets/cslider";
       program {
          signal: "e,state,direction,v"; source: "e";
          action: STATE_SET "vertical" 0.0;
-         target: "e.dragable.cursor";
-         target: "e.swallow.content";
+         target: "cursor";
+         target: "end1";
+         target: "end2";
       }
       program {
          signal: "mouse,clicked,1"; source: "inset";
diff --git a/data/themes/edc/spectrum.edc b/data/themes/edc/spectrum.edc
index 67e96080d..ade8d79b7 100644
--- a/data/themes/edc/spectrum.edc
+++ b/data/themes/edc/spectrum.edc
@@ -2,6 +2,10 @@ group { name: "e/widgets/spectrum";
    images.image: "inset_shadow.png" COMP;
    images.image: "bevel_in.png" COMP;
    images.image: "dot_pattern.png" COMP;
+   images.image: "col_sel_end_bottom.png" COMP;
+   images.image: "col_sel_end_top.png" COMP;
+   images.image: "col_sel_end_left.png" COMP;
+   images.image: "col_sel_end_right.png" COMP;
    parts {
       part {       name: "bg"; type: RECT;
          description { state: "default" 0.0;
@@ -46,18 +50,6 @@ group { name: "e/widgets/spectrum";
             color: 255 255 255 128;
          }
       }
-      part { name: "inset";
-         description { state: "default" 0.0;
-            image.normal: "bevel_in.png";
-            image.border: 1 1 1 1;
-            image.middle: 0;
-            rel1.to: "bg";
-            rel1.offset: -1 -1;
-            rel2.to: "bg";
-            rel2.offset: 0 0;
-            fill.smooth: 0;
-         }
-      }
       part { name: "e.dragable.cursor"; type: RECT;
          dragable.confine: "e.swallow.content";
          dragable.x: 1 1 0;
@@ -73,30 +65,74 @@ group { name: "e/widgets/spectrum";
             rel2.relative: 0.5 0.5;
          }
       }
+      part { name: "end1"; mouse_events: 0;
+         clip_to: "clipper";
+         description { state: "default" 0.0;
+            image.normal: "col_sel_end_top.png";
+            FIXED_SIZE(11, 8)
+            align: 0.5 0.0;
+            rel1.to: "cursor_x";
+            rel2.to: "cursor_x";
+         }
+      }
+      part { name: "end2"; mouse_events: 0;
+         clip_to: "clipper";
+         description { state: "default" 0.0;
+            image.normal: "col_sel_end_bottom.png";
+            FIXED_SIZE(11, 8)
+            align: 0.5 1.0;
+            rel1.to: "cursor_x";
+            rel2.to: "cursor_x";
+         }
+      }
+      part { name: "end3"; mouse_events: 0;
+         clip_to: "clipper";
+         description { state: "default" 0.0;
+            image.normal: "col_sel_end_left.png";
+            FIXED_SIZE(8, 11)
+            align: 0.0 0.5;
+            rel1.to: "cursor_y";
+            rel2.to: "cursor_y";
+         }
+      }
+      part { name: "end4"; mouse_events: 0;
+         clip_to: "clipper";
+         description { state: "default" 0.0;
+            image.normal: "col_sel_end_right.png";
+            FIXED_SIZE(8, 11)
+            align: 1.0 0.5;
+            rel1.to: "cursor_y";
+            rel2.to: "cursor_y";
+         }
+      }
       part { name: "cursor_x"; type: RECT;
          description { state: "default" 0.0;
-            rel1 {
-to_x: "e.dragable.cursor";
-to_y: "e.swallow.content";
-            }
-            rel2 {
-to_x: "e.dragable.cursor";
-to_y: "e.swallow.content";
-            }
-color: 255 255 255 150;
+            rel1.to_x: "e.dragable.cursor";
+            rel1.to_y: "e.swallow.content";
+            rel2.to_x: "e.dragable.cursor";
+            rel2.to_y: "e.swallow.content";
+            color: 255 255 255 150;
          }
       }
       part { name: "cursor_y"; type: RECT;
          description { state: "default" 0.0;
-            rel1 {
-to_x: "e.swallow.content";
-to_y: "e.dragable.cursor";
-            }
-            rel2 {
-to_x: "e.swallow.content";
-to_y: "e.dragable.cursor";
-            }
-color: 255 255 255 150;
+            rel1.to_x: "e.swallow.content";
+            rel1.to_y: "e.dragable.cursor";
+            rel2.to_x: "e.swallow.content";
+            rel2.to_y: "e.dragable.cursor";
+            color: 255 255 255 150;
+         }
+      }
+      part { name: "inset";
+         description { state: "default" 0.0;
+            image.normal: "bevel_in.png";
+            image.border: 1 1 1 1;
+            image.middle: 0;
+            rel1.to: "bg";
+            rel1.offset: -1 -1;
+            rel2.to: "bg";
+            rel2.offset: 0 0;
+            fill.smooth: 0;
          }
       }
    }
diff --git a/data/themes/img/col_sel_end_bottom.png b/data/themes/img/col_sel_end_bottom.png
new file mode 100644
index 000000000..403fe59db
Binary files /dev/null and b/data/themes/img/col_sel_end_bottom.png differ
diff --git a/data/themes/img/col_sel_end_left.png b/data/themes/img/col_sel_end_left.png
new file mode 100644
index 000000000..131644909
Binary files /dev/null and b/data/themes/img/col_sel_end_left.png differ
diff --git a/data/themes/img/col_sel_end_right.png b/data/themes/img/col_sel_end_right.png
new file mode 100644
index 000000000..c6a333510
Binary files /dev/null and b/data/themes/img/col_sel_end_right.png differ
diff --git a/data/themes/img/col_sel_end_top.png b/data/themes/img/col_sel_end_top.png
new file mode 100644
index 000000000..77c4f5524
Binary files /dev/null and b/data/themes/img/col_sel_end_top.png differ