slider: move range as a group in themedevs/ami/slider-range

Most of the used cases would be slider without range, hence move
range feature to a new theme.
"elm/slider/range/../.."

2 files changed, 1439 insertions, 277 deletions

diff --git a/data/elementary/themes/edc/elm/slider.edc b/data/elementary/themes/edc/elm/slider.edc
index 5786dfec60..3a3bc8e236 100644
--- a/data/elementary/themes/edc/elm/slider.edc
+++ b/data/elementary/themes/edc/elm/slider.edc
@@ -39,6 +39,1421 @@ group { name: "elm/slider/horizontal/default";
    images.image: "slider_run_bevel_horiz.png" COMP;
    images.image: "slider_run_base_light_horiz.png" COMP;
    images.image: "horiz_glow_run.png" COMP;
+   images.image: "horiz_glow_run_rev.png" COMP;
+   images.image: "knob_round_small_normal.png" COMP;
+   images.image: "knob_round_small_selected.png" COMP;
+   set { name: "knob";
+      // XXX: add more sizes (at least up to 128x128)
+      image { image: "knob_sz_24.png"  COMP; size: 31 31 32 32; }
+      image { image: "knob_sz_22.png"  COMP; size: 29 29 30 30; }
+      image { image: "knob_sz_20.png"  COMP; size: 27 27 28 28; }
+      image { image: "knob_sz_18.png"  COMP; size: 25 25 26 26; }
+      image { image: "knob_sz_16.png"  COMP; size: 23 23 24 24; }
+      image { image: "knob_sz_14.png"  COMP; size: 21 21 22 22; }
+      image { image: "knob_sz_12.png"  COMP; size: 19 19 20 20; }
+      image { image: "knob_sz_10.png"  COMP; size: 17 17 18 18; }
+      image { image: "knob_sz_08.png"  COMP; size: 15 15 16 16; }
+      image { image: "knob_sz_06.png"  COMP; size: 13 13 14 14; }
+      image { image: "knob_sz_04.png"  COMP; size:  0  0 12 12; }
+   }
+#define ICON    1
+#define LABEL   2
+#define END     4
+#define UNITS   8
+#define MASK    15
+#define INVERT  16
+#define DISABLE 32
+   script {
+      public slmode;
+      public eval_mode(m) {
+         new ic = m & ICON;
+         new l = m & LABEL;
+         new e = m & END;
+         new u = m & UNITS;
+         new d = m & DISABLE;
+         new i = m & INVERT;
+         if (i) {
+            if (!d) {
+               set_state(PART:"base", "default", 0.0);
+               set_state(PART:"glow", "inverted", 0.0);
+            } else {
+               set_state(PART:"base", "disabled", 0.0);
+               set_state(PART:"glow", "disabled_inverted", 0.0);
+            }
+         } else {
+            if (!d) {
+               set_state(PART:"base", "default", 0.0);
+               set_state(PART:"glow", "default", 0.0);
+            } else {
+               set_state(PART:"base", "disabled", 0.0);
+               set_state(PART:"glow", "disabled", 0.0);
+            }
+         }
+         if (l) {
+            if (!d) {
+               set_state(PART:"elm.text", "visible", 0.0);
+            } else {
+               set_state(PART:"elm.text", "disabled_visible", 0.0);
+            }
+         } else {
+            set_state(PART:"elm.text", "default", 0.0);
+         }
+         if (u) {
+            if (!d) {
+               set_state(PART:"elm.units", "visible", 0.0);
+               set_state(PART:"limits", "visible", 0.0);
+            } else {
+               set_state(PART:"elm.units", "disabled_visible", 0.0);
+               set_state(PART:"limits", "disabled_visible", 0.0);
+            }
+         } else {
+            set_state(PART:"elm.units", "default", 0.0);
+            set_state(PART:"limits", "default", 0.0);
+         }
+         if (ic) {
+            set_state(PART:"elm.swallow.icon", "visible", 0.0);
+            set_state(PART:"sizer.content", "visible", 0.0);
+         } else {
+            set_state(PART:"elm.swallow.icon", "default", 0.0);
+            set_state(PART:"sizer.content", "default", 0.0);
+         }
+         if (e) {
+            set_state(PART:"elm.swallow.end", "visible", 0.0);
+            set_state(PART:"sizer.content.end", "visible", 0.0);
+         } else {
+            set_state(PART:"elm.swallow.end", "default", 0.0);
+            set_state(PART:"sizer.content.end", "default", 0.0);
+         }
+         if (!d) {
+            set_state(PART:"event", "default", 0.0);
+            set_state(PART:"dis_clip", "default", 0.0);
+         } else {
+            set_state(PART:"event", "disabled", 0.0);
+            set_state(PART:"dis_clip", "disabled", 0.0);
+         }
+      }
+   }
+   parts {
+      part { name: "elm.swallow.bar"; type: SWALLOW;
+         scale: 1;
+         description { state: "default" 0.0;
+            min: 42 21;
+            max: 99999 21;
+            align: 1.0 0.5;
+            rel1.to_x: "elm.text";
+            rel1.relative: 1.0 0.0;
+            rel1.offset: 2 0;
+            rel2.to_x: "limits";
+            rel2.relative: 0.0 1.0;
+            rel2.offset: -3 -1;
+         }
+      }
+      part { name: "base"; mouse_events: 0;
+         description { state: "default" 0.0;
+            rel1.to: "elm.swallow.bar";
+            rel2.to: "elm.swallow.bar";
+            image.normal: "slider_run_base_horiz.png";
+            image.border: 4 4 0 0;
+            fill.smooth: 0;
+            min: 8 5;
+            max: 99999 5;
+            fixed: 0 1;
+         }
+         description { state: "disabled" 0.0;
+            inherit: "default" 0.0;
+            image.normal: "slider_run_base_light_horiz.png";
+         }
+      }
+      part { name: "glow"; mouse_events: 0;
+         description { state: "default" 0.0;
+            image.normal: "horiz_glow_run.png";
+            rel1.offset: 1 1;
+            rel1.to: "base";
+            rel2.relative: 0.5 1.0;
+            rel2.offset: -1 -2;
+            rel2.to_x: "button";
+            rel2.to_y: "base";
+            image.border: 0 4 0 0;
+         }
+         description { state: "disabled" 0.0;
+            inherit: "default" 0.0;
+            color: 255 255 255 64;
+         }
+         description { state: "inverted" 0.0;
+            image.normal: "horiz_glow_run_rev.png";
+            rel1.relative: 0.5 0.0;
+            rel1.offset: 0 1;
+            rel1.to_x: "button";
+            rel1.to_y: "base";
+            rel2.offset: -2 -2;
+            rel2.to: "base";
+            image.border: 4 0 0 0;
+         }
+         description { state: "disabled_inverted" 0.0;
+            inherit: "inverted" 0.0;
+            color: 255 255 255 64;
+         }
+      }
+      part { name: "bevel"; mouse_events: 0;
+         description { state: "default" 0.0;
+            rel1.to: "base";
+            rel2.to: "base";
+            image.normal: "slider_run_bevel_horiz.png";
+            image.border: 5 5 0 0;
+            fill.smooth: 0;
+         }
+      }
+      part { name: "dis_clip"; type: RECT;
+         description { state: "default" 0.0;
+            rel1.to: "elm.swallow.icon";
+            rel2.to: "elm.swallow.end";
+         }
+         description { state: "disabled" 0.0;
+            inherit: "default" 0.0;
+            color: 255 255 255 64;
+         }
+      }
+      part { name: "elm.swallow.icon"; type: SWALLOW;
+         clip_to: "dis_clip";
+         description { state: "default" 0.0;
+            visible: 0;
+            align: 0.0 0.5;
+            rel1.offset: 0 2;
+            rel1.to_y: "elm.swallow.bar";
+            rel2.offset: -1 -3;
+            rel2.relative: 0.0 1.0;
+            rel2.to_y: "elm.swallow.bar";
+         }
+         description { state: "visible" 0.0;
+            inherit: "default" 0.0;
+            visible: 1;
+            aspect: 1.0 1.0; aspect_preference: VERTICAL;
+            rel1.offset: 2 2;
+            rel2.offset: 2 -3;
+         }
+      }
+      part { name: "sizer.content"; type: TEXT; mouse_events:  0;
+         scale: 1;
+         description { state: "default" 0.0;
+            fixed: 1 1;
+            visible: 0;
+            text { font: FN; size: 10;
+               min: 0 0;
+               text_class: "slider_text";
+            }
+         }
+         description { state: "visible" 0.0;
+            inherit: "default" 0.0;
+            rel1.to: "elm.swallow.icon";
+            rel2.to: "elm.swallow.icon";
+            text {
+               min: 1 1;
+               ellipsis: -1;
+               text: "M";
+            }
+         }
+      }
+      part { name: "elm.text"; type: TEXT; mouse_events: 0;
+         effect: SHADOW BOTTOM;
+         scale: 1;
+         description { state: "default" 0.0;
+            fixed: 1 1;
+            align: 0.0 0.5;
+            rel1.to_x: "elm.swallow.icon";
+            rel1.relative: 1.0 0.0;
+            rel1.offset: -1 2;
+            rel2.to_x: "elm.swallow.icon";
+            rel2.relative: 1.0 1.0;
+            rel2.offset: -1 -3;
+            color: FN_COL_DEFAULT;
+            color_class: "slider_text";
+            text { font: FN; size: 10;
+               text_class: "slider";
+               min: 0 0;
+               align: 0.0 0.5;
+            }
+            visible: 0;
+         }
+         description { state: "visible" 0.0;
+            inherit: "default" 0.0;
+            fixed: 1 0;
+            visible: 1;
+            rel1.offset: 2 2;
+            rel2.offset: 2 -3;
+            text.min: 1 1;
+            text.ellipsis: -1;
+         }
+         description { state: "disabled_visible" 0.0;
+            inherit: "visible" 0.0;
+            color_class: "slider_text_disabled";
+            color3: 255 255 255 255;
+         }
+      }
+      part { name: "elm.swallow.end"; type: SWALLOW;
+         clip_to: "dis_clip";
+         description { state: "default" 0.0;
+            visible: 0;
+            align: 1.0 0.5;
+            rel1.offset: 0 2;
+            rel1.relative: 1.0 0.0;
+            rel2.offset: -1 -3;
+         }
+         description { state: "visible" 0.0;
+            inherit: "default" 0.0;
+            visible: 1;
+            aspect: 1.0 1.0;
+            aspect_preference: VERTICAL;
+            rel1.offset: -3 2;
+            rel2.offset: -3 -3;
+         }
+      }
+      part { name: "sizer.content.end"; type: TEXT; mouse_events:  0;
+         scale: 1;
+         description { state: "default" 0.0;
+            fixed: 1 1;
+            visible: 0;
+            text { font: FN; size: 10;
+               min: 0 0;
+               text_class: "slider_text";
+            }
+         }
+         description { state: "visible" 0.0;
+            inherit: "default" 0.0;
+            rel1.to: "elm.swallow.end";
+            rel2.to: "elm.swallow.end";
+            text {
+               min: 1 1;
+               ellipsis: -1;
+               text: "M";
+            }
+         }
+      }
+      alias: "elm.units.min" "limits:elm.units.min";
+      alias: "elm.units.max" "limits:elm.units.max";
+      part { name: "limits"; type: GROUP; mouse_events: 0;
+         source: "elm/slider/hidden/limit";
+         scale: 1;
+         description { state: "default" 0.0;
+            visible: 0;
+            align: 1.0 0.5;
+            min: SOURCE;
+            fixed: 1 1;
+            rel1.to_x: "elm.swallow.end";
+            rel1.relative: 0.0 0.0;
+            rel1.offset: 0 2;
+            rel2.to_x: "elm.swallow.end";
+            rel2.relative: 0.0 1.0;
+            rel2.offset: -1 -3;
+         }
+         description { state: "visible" 0.0;
+            inherit: "default" 0.0;
+            rel1.offset: -3 2;
+            rel2.offset: -3 -3;
+         }
+      }
+      part { name: "elm.units"; type: TEXT; mouse_events: 0;
+         effect: SHADOW BOTTOM;
+         scale: 1;
+         description { state: "default" 0.0;
+            visible: 0;
+            fixed: 1 1;
+            rel1.to_x: "limits";
+            rel2.to_x: "limits";
+            color: FN_COL_DEFAULT;
+            color_class: "slider_text";
+            text { font: FN; size: 10;
+               text_class: "slider";
+               align: 1.0 0.5;
+               min: 1 1;
+               ellipsis: -1;
+            }
+         }
+         description { state: "visible" 0.0;
+            inherit: "default" 0.0;
+            visible: 1;
+         }
+         description { state: "disabled_visible" 0.0;
+            inherit: "visible" 0.0;
+            color_class: "slider_text_disabled";
+            color3: 255 255 255 255;
+         }
+      }
+      part { name: "button"; type: GROUP; mouse_events: 0;
+         source: "elm/slider/horizontal/indicator/default";
+         description { state: "default" 0.0;
+            fixed: 1 1;
+            rel1.to: "elm.dragable.slider";
+            rel2.to: "elm.dragable.slider";
+         }
+         description { state: "hidden" 0.0;
+            inherit: "default" 0.0;
+            visible: 0;
+         }
+      }
+      part { name: "elm.dragable.slider"; type: RECT;
+         scale: 1;
+         dragable.x: 1 1 0;
+         dragable.y: 0 0 0;
+         dragable.confine: "elm.swallow.bar";
+         description { state: "default" 0.0;
+            color: 0 0 0 0;
+            min: 16 16;
+            max: 16 16;
+            fixed: 1 1;
+            rel1.relative: 0.5 0.0;
+            rel1.to_x: "elm.swallow.bar";
+            rel2.relative: 0.5 1.0;
+            rel2.to_x: "elm.swallow.bar";
+         }
+      }
+      part { name: "knob";
+         description { state: "default" 0.0;
+            image.normal: "knob";
+            fixed: 1 1;
+            min: 12 12;
+            step: 2 2;
+            max: 32 32; // XXX allow bigger sizes with more knob images
+            rel1.to: "elm.dragable.slider";
+            rel1.offset: -4 -4;
+            rel2.to: "elm.dragable.slider";
+            rel2.offset: 3 3;
+         }
+         description { state: "clicked" 0.0;
+            inherit: "default" 0.0;
+         }
+      }
+      part { name: "slideevent"; type: RECT; repeat_events: 1;
+         scale: 1;
+         ignore_flags: ON_HOLD;
+         dragable.events: "elm.dragable.slider";
+         description { state: "default" 0.0;
+            fixed: 1 1;
+            rel1.to: "elm.dragable.slider";
+            rel2.to: "elm.dragable.slider";
+            color: 0 0 0 0;
+         }
+      }
+      part { name: "elm.track.slider"; type: SWALLOW; mouse_events: 0;
+         description { state: "default" 0.0;
+            max: 0 0;
+            rel1.to: "elm.dragable.slider";
+            rel2.to: "elm.dragable.slider";
+         }
+      }
+      part { name: "event"; type: RECT;
+         description { state: "default" 0.0;
+            color: 0 0 0 0;
+            visible: 0;
+         }
+         description { state: "disabled" 0.0;
+            inherit: "default" 0.0;
+            visible: 1;
+         }
+      }
+   }
+   programs {
+      program {
+         signal: "mouse,down,1"; source: "elm.dragable.slider";
+         action:  STATE_SET "clicked" 0.0;
+         target: "knob";
+      }
+      program {
+         signal: "mouse,up,1"; source: "elm.dragable.slider";
+         action:  STATE_SET "default" 0.0;
+         target: "knob";
+      }
+      program {
+         signal: "elm,state,indicator,show"; source: "elm";
+         action:  SIGNAL_EMIT "elm,popup,show" "elm";
+         after: "popup_show2";
+      }
+      program {
+         signal: "elm,state,indicator,hide"; source: "elm";
+         action:  SIGNAL_EMIT "elm,popup,hide" "elm";
+         after: "popup_hide2";
+      }
+      program {
+         signal: "mouse,down,1"; source: "slideevent";
+         action:  SIGNAL_EMIT "elm,popup,show" "elm";
+         after: "popup_show2";
+      }
+      program { name: "popup_show2";
+         action:  STATE_SET "hidden" 0.0;
+         target: "button";
+      }
+      program {
+         signal: "mouse,up,1"; source: "slideevent";
+         action:  SIGNAL_EMIT "elm,popup,hide" "elm";
+         after: "popup_hide2";
+      }
+      program { name: "popup_hide2";
+         action:  STATE_SET "default" 0.0;
+         target: "button";
+      }
+      program {
+         signal: "elm,state,text,visible"; source: "elm";
+         script {
+            new m = get_int(slmode);
+            m |= LABEL; set_int(slmode, m);
+            eval_mode(m);
+         }
+      }
+      program {
+         signal: "elm,state,text,hidden"; source: "elm";
+         script {
+            new m = get_int(slmode);
+            m &= ~LABEL; set_int(slmode, m);
+            eval_mode(m);
+         }
+      }
+      program {
+         signal: "elm,state,icon,visible"; source: "elm";
+         script {
+            new m = get_int(slmode);
+            m |= ICON; set_int(slmode, m);
+            eval_mode(m);
+         }
+      }
+      program {
+         signal: "elm,state,icon,hidden"; source: "elm";
+         script {
+            new m = get_int(slmode);
+            m &= ~ICON; set_int(slmode, m);
+            eval_mode(m);
+         }
+      }
+      program { name: "end_show";
+         signal: "elm,state,end,visible"; source: "elm";
+         script {
+            new m = get_int(slmode);
+            m |= END; set_int(slmode, m);
+            eval_mode(m);
+         }
+      }
+      program { name: "end_hide";
+         signal: "elm,state,end,hidden"; source: "elm";
+         script {
+            new m = get_int(slmode);
+            m &= ~END; set_int(slmode, m);
+            eval_mode(m);
+         }
+      }
+      program {
+         signal: "elm,state,units,visible"; source: "elm";
+         script {
+            new m = get_int(slmode);
+            m |= UNITS; set_int(slmode, m);
+            eval_mode(m);
+         }
+      }
+      program {
+         signal: "elm,state,units,visible"; source: "elm";
+         action: SIGNAL_EMIT "limits,visible" "elm";
+         target: "limits";
+      }
+      program {
+         signal: "elm,state,units,hidden"; source: "elm";
+         action:  STATE_SET "default" 0.0;
+         script {
+            new m = get_int(slmode);
+            m &= ~UNITS; set_int(slmode, m);
+            eval_mode(m);
+         }
+      }
+      program {
+         signal: "elm,state,units,hidden"; source: "elm";
+         action: SIGNAL_EMIT "limits,hide" "elm";
+         target: "limits";
+      }
+      program {
+         signal: "elm,state,inverted,on"; source: "elm";
+         script {
+            new m = get_int(slmode);
+            m |= INVERT; set_int(slmode, m);
+            eval_mode(m);
+         }
+      }
+      program {
+         signal: "elm,state,inverted,off"; source: "elm";
+         script {
+            new m = get_int(slmode);
+            m &= ~INVERT; set_int(slmode, m);
+            eval_mode(m);
+         }
+      }
+      program {
+         signal: "elm,state,disabled"; source: "elm";
+         script {
+            new m = get_int(slmode);
+            m |= DISABLE; set_int(slmode, m);
+            eval_mode(m);
+         }
+      }
+      program {
+         signal: "elm,state,enabled"; source: "elm";
+         script {
+            new m = get_int(slmode);
+            m &= ~DISABLE; set_int(slmode, m);
+            eval_mode(m);
+         }
+      }
+   }
+#undef ICON
+#undef LABEL
+#undef END
+#undef UNITS
+#undef MASK
+#undef INVERT
+#undef DISABLE
+}
+
+group { name: "elm/slider/horizontal/indicator/default";
+   alias: "elm/slider/horizontal/indicator/disabled";
+   alias: "elm/slider/horizontal/popup/default";
+   alias: "elm/slider/horizontal/indicator/media_player/position/default";
+   alias: "elm/slider/horizontal/indicator/media_player/position/flush";
+   alias: "elm/slider/horizontal/indicator/media_player/volume/default";
+   alias: "elm/slider/horizontal/indicator/media_player/volume/flush";
+   images.image: "darken_rounded_square.png" COMP;
+   parts {
+      part { name: "base"; type: SPACER;
+         scale: 1;
+         description { state: "default" 0.0;
+            fixed: 1 1;
+            min: 16 16;
+         }
+      }
+      part { name: "clip"; type: RECT;
+         description { state: "default" 0.0;
+            fixed: 1 1;
+            rel1.to: "elm.indicator";
+            rel1.offset: -100 -100;
+            rel2.to: "elm.indicator";
+            rel2.offset: 99 99;
+            visible: 0;
+         }
+         description { state: "visible" 0.0;
+            inherit: "default" 0.0;
+            visible: 1;
+         }
+      }
+      part { name: "bevel"; mouse_events: 0;
+         clip_to: "clip";
+         description { state: "default" 0.0;
+            rel1.offset: -12 -12;
+            rel1.to: "elm.indicator";
+            rel2.offset: 11 11;
+            rel2.to: "elm.indicator";
+            image.normal: "darken_rounded_square.png";
+            image.border: 15 15 15 15;
+            fill.smooth: 0;
+            visible: 0;
+         }
+         description { state: "visible" 0.0;
+            inherit: "default" 0.0;
+            visible: 1;
+         }
+      }
+      part { name: "elm.indicator"; type: TEXT; mouse_events: 0;
+         clip_to: "clip";
+         effect: SHADOW BOTTOM;
+         scale: 1;
+         description { state: "default" 0.0;
+            fixed: 1 1;
+            align: 0.5 1.0;
+            rel1.to: "base";
+            rel1.relative: 0.0 -0.1;
+            rel1.offset: 0 -12;
+            rel2.to: "base";
+            rel2.relative: 1.0 -0.1;
+            rel2.offset: -1 -12;
+            color_class: "slider_indicator";
+            color: FN_COL_DEFAULT;
+            text { font: FNBD; size: 10;
+               min: 1 1;
+               align: 0.5 1.0;
+               text_class: "slider_indicator";
+               ellipsis: -1;
+            }
+            visible: 0;
+         }
+         description { state: "visible" 0.0;
+            inherit: "default" 0.0;
+            visible: 1;
+         }
+      }
+   }
+   programs {
+      program {
+         signal: "elm,popup,show"; source: "elm";
+         action:  STATE_SET "visible" 0.0;
+         target:  "elm.indicator";
+         target:  "bevel";
+      }
+      program {
+         signal: "elm,popup,hide"; source: "elm";
+         action:  STATE_SET "default" 0.0;
+         target:  "elm.indicator";
+         target:  "bevel";
+      }
+      program {
+         signal: "elm,popup,hide"; source: "elm";
+         action:  SIGNAL_EMIT "elm,popup,hide,done" "elm";
+      }
+      program {
+         signal: "elm,state,val,show"; source: "elm";
+         action:  STATE_SET "visible" 0.0;
+         target: "clip";
+      }
+      program {
+         signal: "elm,state,val,hide"; source: "elm";
+         action:  STATE_SET "default" 0.0;
+         target: "clip";
+      }
+      program {
+         signal: "elm,state,indicator,show"; source: "elm";
+         action:  STATE_SET "visible" 0.0;
+         target:  "elm.indicator";
+         target:  "bevel";
+      }
+      program {
+         signal: "elm,state,indicator,hide"; source: "elm";
+         action:  STATE_SET "visible" 0.0;
+         target:  "elm.indicator";
+         target:  "bevel";
+      }
+      program {
+         signal:  "elm,state,disabled"; source: "elm";
+         action:  STATE_SET "disabled" 0.0;
+         target:  "base";
+      }
+      program {
+         signal: "elm,state,enabled"; source: "elm";
+         action:  STATE_SET "default" 0.0;
+         target:  "base";
+      }
+   }
+}
+
+group { name: "elm/slider/vertical/default";
+   alias: "elm/slider/vertical/disabled";
+   alias: "elm/slider/vertical/media_player/position/default";
+   alias: "elm/slider/vertical/media_player/position/flush";
+   alias: "elm/slider/vertical/media_player/volume/default";
+   alias: "elm/slider/vertical/media_player/volume/flush";
+   images.image: "slider_run_base_vert.png" COMP;
+   images.image: "slider_run_bevel_vert.png" COMP;
+   images.image: "slider_run_base_light_vert.png" COMP;
+   images.image: "vert_glow_run.png" COMP;
+   images.image: "vert_glow_run_rev.png" COMP;
+   images.image: "knob_round_small_normal.png" COMP;
+   images.image: "knob_round_small_selected.png" COMP;
+   set { name: "knob";
+      // XXX: add more sizes (at least up to 128x128)
+      image { image: "knob_sz_24.png"  COMP; size: 31 31 32 32; }
+      image { image: "knob_sz_22.png"  COMP; size: 29 29 30 30; }
+      image { image: "knob_sz_20.png"  COMP; size: 27 27 28 28; }
+      image { image: "knob_sz_18.png"  COMP; size: 25 25 26 26; }
+      image { image: "knob_sz_16.png"  COMP; size: 23 23 24 24; }
+      image { image: "knob_sz_14.png"  COMP; size: 21 21 22 22; }
+      image { image: "knob_sz_12.png"  COMP; size: 19 19 20 20; }
+      image { image: "knob_sz_10.png"  COMP; size: 17 17 18 18; }
+      image { image: "knob_sz_08.png"  COMP; size: 15 15 16 16; }
+      image { image: "knob_sz_06.png"  COMP; size: 13 13 14 14; }
+      image { image: "knob_sz_04.png"  COMP; size:  0  0 12 12; }
+   }
+#define ICON    1
+#define LABEL   2
+#define END     4
+#define UNITS   8
+#define MASK    15
+#define INVERT  16
+#define DISABLE 32
+   script {
+      public slmode;
+      public eval_mode(m) {
+         new ic = m & ICON;
+         new l = m & LABEL;
+         new e = m & END;
+         new u = m & UNITS;
+         new d = m & DISABLE;
+         new i = m & INVERT;
+         if (i) {
+            if (!d) {
+               set_state(PART:"base", "default", 0.0);
+               set_state(PART:"glow", "inverted", 0.0);
+            } else {
+               set_state(PART:"base", "disabled", 0.0);
+               set_state(PART:"glow", "disabled_inverted", 0.0);
+            }
+         } else {
+            if (!d) {
+               set_state(PART:"base", "default", 0.0);
+               set_state(PART:"glow", "default", 0.0);
+            } else {
+               set_state(PART:"base", "disabled", 0.0);
+               set_state(PART:"glow", "disabled", 0.0);
+            }
+         }
+         if (l) {
+            if (!d) {
+               set_state(PART:"elm.text", "visible", 0.0);
+            } else {
+               set_state(PART:"elm.text", "disabled_visible", 0.0);
+            }
+         } else {
+            set_state(PART:"elm.text", "default", 0.0);
+         }
+         if (u) {
+            if (!d) {
+               set_state(PART:"elm.units", "visible", 0.0);
+               set_state(PART:"limits", "visible", 0.0);
+            } else {
+               set_state(PART:"elm.units", "disabled_visible", 0.0);
+               set_state(PART:"limits", "disabled_visible", 0.0);
+            }
+         } else {
+            set_state(PART:"elm.units", "default", 0.0);
+            set_state(PART:"limits", "default", 0.0);
+         }
+         if (ic) {
+            set_state(PART:"elm.swallow.icon", "visible", 0.0);
+            set_state(PART:"sizer.content", "visible", 0.0);
+         } else {
+            set_state(PART:"elm.swallow.icon", "default", 0.0);
+            set_state(PART:"sizer.content", "default", 0.0);
+         }
+         if (e) {
+            set_state(PART:"elm.swallow.end", "visible", 0.0);
+            set_state(PART:"sizer.content.end", "visible", 0.0);
+         } else {
+            set_state(PART:"elm.swallow.end", "default", 0.0);
+            set_state(PART:"sizer.content.end", "default", 0.0);
+         }
+         if (!d) {
+            set_state(PART:"event", "default", 0.0);
+            set_state(PART:"dis_clip", "default", 0.0);
+         } else {
+            set_state(PART:"event", "disabled", 0.0);
+            set_state(PART:"dis_clip", "disabled", 0.0);
+         }
+      }
+   }
+   parts {
+      part { name: "elm.swallow.bar"; type: SWALLOW;
+         scale: 1;
+         description { state: "default" 0.0;
+            min: 21 42;
+            max: 21 99999;
+            align: 0.5 1.0;
+            rel1.to_y: "elm.text";
+            rel1.relative: 0.0 1.0;
+            rel1.offset: 0 2;
+            rel2.to_y: "limits";
+            rel2.relative: 1.0 0.0;
+            rel2.offset: -1 -3;
+         }
+      }
+      part { name: "base"; mouse_events: 0;
+         description { state: "default" 0.0;
+            rel1.to: "elm.swallow.bar";
+            rel2.to: "elm.swallow.bar";
+            image.normal: "slider_run_base_vert.png";
+            image.border: 0 0 4 4;
+            fill.smooth: 0;
+            min: 5 8;
+            max: 5 99999;
+            fixed: 1 0;
+         }
+         description { state: "disabled" 0.0;
+            inherit: "default" 0.0;
+            image.normal: "slider_run_base_light_vert.png";
+         }
+      }
+      part { name: "glow"; mouse_events: 0;
+         description { state: "default" 0.0;
+            image.normal: "vert_glow_run.png";
+            rel1.offset: 1 1;
+            rel1.to: "base";
+            rel2.relative: 1.0 0.5;
+            rel2.offset: -2 -1;
+            rel2.to_y: "button";
+            rel2.to_x: "base";
+            image.border: 0 0 0 4;
+         }
+         description { state: "disabled" 0.0;
+            inherit: "default" 0.0;
+            color: 255 255 255 64;
+         }
+         description { state: "inverted" 0.0;
+            image.normal: "vert_glow_run_rev.png";
+            rel1.relative: 0.0 0.5;
+            rel1.offset: 1 0;
+            rel1.to_y: "button";
+            rel1.to_x: "base";
+            rel2.offset: -2 -2;
+            rel2.to: "base";
+            image.border: 0 0 4 0;
+         }
+         description { state: "disabled_inverted" 0.0;
+            inherit: "inverted" 0.0;
+            color: 255 255 255 64;
+         }
+      }
+      part { name: "bevel"; mouse_events: 0;
+         description { state: "default" 0.0;
+            rel1.to: "base";
+            rel2.to: "base";
+            image.normal: "slider_run_bevel_vert.png";
+            image.border: 0 0 5 5;
+            fill.smooth: 0;
+         }
+      }
+      part { name: "dis_clip"; type: RECT;
+         description { state: "default" 0.0;
+            rel1.to: "elm.swallow.icon";
+            rel2.to: "elm.swallow.end";
+         }
+         description { state: "disabled" 0.0;
+            inherit: "default" 0.0;
+            color: 255 255 255 64;
+         }
+      }
+      part { name: "elm.swallow.icon"; type: SWALLOW;
+         clip_to: "dis_clip";
+         description { state: "default" 0.0;
+            visible: 0;
+            align: 0.5 0.0;
+            rel1.offset: 2 0;
+            rel1.to_x: "elm.swallow.bar";
+            rel2.offset: -3 -1;
+            rel2.relative: 1.0 0.0;
+            rel2.to_x: "elm.swallow.bar";
+         }
+         description { state: "visible" 0.0;
+            inherit: "default" 0.0;
+            visible: 1;
+            aspect: 1.0 1.0; aspect_preference: VERTICAL;
+            rel1.offset: 2 2;
+            rel2.offset: -3 2;
+         }
+      }
+      part { name: "sizer.content"; type: TEXT; mouse_events:  0;
+         scale: 1;
+         description { state: "default" 0.0;
+            fixed: 1 1;
+            visible: 0;
+            text { font: FN; size: 10;
+               min: 0 0;
+               text_class: "slider_text";
+            }
+         }
+         description { state: "visible" 0.0;
+            inherit: "default" 0.0;
+            rel1.to: "elm.swallow.icon";
+            rel2.to: "elm.swallow.icon";
+            text {
+               min: 1 1;
+               ellipsis: -1;
+               text: "M";
+            }
+         }
+      }
+      part { name: "elm.text"; type: TEXT; mouse_events: 0;
+         effect: SHADOW BOTTOM;
+         scale: 1;
+         description { state: "default" 0.0;
+            fixed: 0 1;
+            align: 0.5 0.0;
+            rel1.to_y: "elm.swallow.icon";
+            rel1.relative: 0.0 1.0;
+            rel1.offset: 2 -1;
+            rel2.to_y: "elm.swallow.icon";
+            rel2.relative: 1.0 1.0;
+            rel2.offset: -3 -1;
+            color: FN_COL_DEFAULT;
+            color_class: "slider_text";
+            text { font: FN; size: 10;
+               text_class: "slider";
+               min: 1 0;
+               ellipsis: -1;
+               align: 0.5 0.0;
+            }
+            visible: 0;
+         }
+         description { state: "visible" 0.0;
+            inherit: "default" 0.0;
+            visible: 1;
+            rel1.offset: 2 2;
+            rel2.offset: -3 2;
+            text.min: 1 1;
+            text.ellipsis: -1;
+
+         }
+         description { state: "disabled_visible" 0.0;
+            inherit: "visible" 0.0;
+            color_class: "slider_text_disabled";
+            color3: 255 255 255 255;
+         }
+      }
+      part { name: "elm.swallow.end"; type: SWALLOW;
+         clip_to: "dis_clip";
+         description { state: "default" 0.0;
+            visible: 0;
+            align: 0.5 1.0;
+            rel1.offset: 2 0;
+            rel1.relative: 0.0 1.0;
+            rel2.offset: -3 -1;
+         }
+         description { state: "visible" 0.0;
+            inherit: "default" 0.0;
+            visible: 1;
+            aspect: 1.0 1.0;
+            aspect_preference: VERTICAL;
+            rel2.offset: 2 -3;
+            rel2.offset: -3 -3;
+         }
+      }
+      part { name: "sizer.content.end"; type: TEXT; mouse_events:  0;
+         scale: 1;
+         description { state: "default" 0.0;
+            fixed: 1 1;
+            visible: 0;
+            text { font: FN; size: 10;
+               min: 0 0;
+               text_class: "slider_text";
+            }
+         }
+         description { state: "visible" 0.0;
+            inherit: "default" 0.0;
+            rel1.to: "elm.swallow.end";
+            rel2.to: "elm.swallow.end";
+            text {
+               min: 1 1;
+               ellipsis: -1;
+               text: "M";
+            }
+         }
+      }
+      alias: "elm.units.min" "limits:elm.units.min";
+      alias: "elm.units.max" "limits:elm.units.max";
+      part { name: "limits"; type: GROUP; mouse_events: 0;
+         source: "elm/slider/hidden/limit";
+         scale: 1;
+         description { state: "default" 0.0;
+            align: 0.5 1.0;
+            fixed: 1 1;
+            max: 0 0;
+            rel1.to_y: "elm.swallow.end";
+            rel1.relative: 0.0 0.0;
+            rel1.offset: 2 1;
+            rel2.to_y: "elm.swallow.end";
+            rel2.relative: 1.0 0.0;
+            rel2.offset: -3 0;
+         }
+         description { state: "visible" 0.0;
+            inherit: "default" 0.0;
+            min: SOURCE;
+            rel1.offset: 2 -3;
+            rel2.offset: -3 -3;
+         }
+      }
+      part { name: "elm.units"; type: TEXT; mouse_events: 0;
+         effect: SHADOW BOTTOM;
+         scale: 1;
+         description { state: "default" 0.0;
+            visible: 0;
+            fixed: 1 1;
+            rel1.to_y: "limits";
+            rel2.to_y: "limits";
+            color: FN_COL_DEFAULT;
+            color_class: "slider_text";
+            text { font: FN; size: 10;
+               text_class: "slider";
+               min: 0 0;
+               align: 0.5 1.0;
+               ellipsis: -1;
+            }
+         }
+         description { state: "visible" 0.0;
+            inherit: "default" 0.0;
+            visible: 1;
+            text.min: 1 1;
+            text.ellipsis: -1;
+         }
+         description { state: "disabled_visible" 0.0;
+            inherit: "visible" 0.0;
+            color_class: "slider_text_disabled";
+            color3: 255 255 255 255;
+         }
+      }
+      part { name: "button"; type: GROUP; mouse_events: 0;
+         source: "elm/slider/vertical/indicator/default";
+         description { state: "default" 0.0;
+            fixed: 1 1;
+            rel1.to: "elm.dragable.slider";
+            rel2.to: "elm.dragable.slider";
+         }
+         description { state: "hidden" 0.0;
+            inherit: "default" 0.0;
+            visible: 0;
+         }
+      }
+      part { name: "elm.dragable.slider"; type: RECT;
+         scale: 1;
+         dragable.x: 0 0 0;
+         dragable.y: 1 1 0;
+         dragable.confine: "elm.swallow.bar";
+         description { state: "default" 0.0;
+            color: 0 0 0 0;
+            min: 16 16;
+            max: 16 16;
+            fixed: 1 1;
+            rel1.relative: 0.0 0.5;
+            rel1.to_x: "elm.swallow.bar";
+            rel2.relative: 1.0 0.5;
+            rel2.to_x: "elm.swallow.bar";
+         }
+      }
+      part { name: "knob";
+         description { state: "default" 0.0;
+            image.normal: "knob";
+            fixed: 1 1;
+            min: 12 12;
+            step: 2 2;
+            max: 32 32; // XXX allow bigger sizes with more knob images
+            rel1.to: "elm.dragable.slider";
+            rel1.offset: -4 -4;
+            rel2.to: "elm.dragable.slider";
+            rel2.offset: 3 3;
+         }
+         description { state: "clicked" 0.0;
+            inherit: "default" 0.0;
+         }
+      }
+      part { name: "slideevent"; type: RECT; repeat_events: 1;
+         scale: 1;
+         ignore_flags: ON_HOLD;
+         dragable.events: "elm.dragable.slider";
+         description { state: "default" 0.0;
+            fixed: 1 1;
+            rel1.to: "elm.dragable.slider";
+            rel2.to: "elm.dragable.slider";
+            color: 0 0 0 0;
+         }
+      }
+      part { name: "elm.track.slider"; type: SWALLOW; mouse_events: 0;
+         description { state: "default" 0.0;
+            max: 0 0;
+            rel1.to: "elm.dragable.slider";
+            rel2.to: "elm.dragable.slider";
+         }
+      }
+      part { name: "event"; type: RECT;
+         description { state: "default" 0.0;
+            color: 0 0 0 0;
+            visible: 0;
+         }
+         description { state: "disabled" 0.0;
+            inherit: "default" 0.0;
+            visible: 1;
+         }
+      }
+   }
+   programs {
+      program {
+         signal: "mouse,down,1"; source: "elm.dragable.slider";
+         action:  STATE_SET "clicked" 0.0;
+         target: "knob";
+      }
+      program {
+         signal: "mouse,up,1"; source: "elm.dragable.slider";
+         action:  STATE_SET "default" 0.0;
+         target: "knob";
+      }
+      program {
+         signal: "elm,state,indicator,show"; source: "elm";
+         action:  SIGNAL_EMIT "elm,popup,show" "elm";
+         after: "popup_show2";
+      }
+      program {
+         signal: "elm,state,indicator,hide"; source: "elm";
+         action:  SIGNAL_EMIT "elm,popup,hide" "elm";
+         after: "popup_hide2";
+      }
+      program {
+         signal: "mouse,down,1"; source: "slideevent";
+         action:  SIGNAL_EMIT "elm,popup,show" "elm";
+         after: "popup_show2";
+      }
+      program { name: "popup_show2";
+         action:  STATE_SET "hidden" 0.0;
+         target: "button";
+      }
+      program {
+         signal: "mouse,up,1"; source: "slideevent";
+         action:  SIGNAL_EMIT "elm,popup,hide" "elm";
+         after: "popup_hide2";
+      }
+      program { name: "popup_hide2";
+         action:  STATE_SET "default" 0.0;
+         target: "button";
+      }
+      program {
+         signal: "elm,state,text,visible"; source: "elm";
+         script {
+            new m = get_int(slmode);
+            m |= LABEL; set_int(slmode, m);
+            eval_mode(m);
+         }
+      }
+      program {
+         signal: "elm,state,text,hidden"; source: "elm";
+         script {
+            new m = get_int(slmode);
+            m &= ~LABEL; set_int(slmode, m);
+            eval_mode(m);
+         }
+      }
+      program {
+         signal: "elm,state,icon,visible"; source: "elm";
+         script {
+            new m = get_int(slmode);
+            m |= ICON; set_int(slmode, m);
+            eval_mode(m);
+         }
+      }
+      program {
+         signal: "elm,state,icon,hidden"; source: "elm";
+         script {
+            new m = get_int(slmode);
+            m &= ~ICON; set_int(slmode, m);
+            eval_mode(m);
+         }
+      }
+      program { name: "end_show";
+         signal: "elm,state,end,visible"; source: "elm";
+         script {
+            new m = get_int(slmode);
+            m |= END; set_int(slmode, m);
+            eval_mode(m);
+         }
+      }
+      program { name: "end_hide";
+         signal: "elm,state,end,hidden"; source: "elm";
+         script {
+            new m = get_int(slmode);
+            m &= ~END; set_int(slmode, m);
+            eval_mode(m);
+         }
+      }
+      program {
+         signal: "elm,state,units,visible"; source: "elm";
+         script {
+            new m = get_int(slmode);
+            m |= UNITS; set_int(slmode, m);
+            eval_mode(m);
+         }
+      }
+      program {
+         signal: "elm,state,units,visible"; source: "elm";
+         action: SIGNAL_EMIT "limits:limits,visible" "elm";
+      }
+      program {
+         signal: "elm,state,units,hidden"; source: "elm";
+         action:  STATE_SET "default" 0.0;
+         script {
+            new m = get_int(slmode);
+            m &= ~UNITS; set_int(slmode, m);
+            eval_mode(m);
+         }
+      }
+      program {
+         signal: "elm,state,units,hidden"; source: "elm";
+         action: SIGNAL_EMIT "limits:limits,hide" "elm";
+      }
+      program {
+         signal: "elm,state,inverted,on"; source: "elm";
+         script {
+            new m = get_int(slmode);
+            m |= INVERT; set_int(slmode, m);
+            eval_mode(m);
+         }
+      }
+      program {
+         signal: "elm,state,inverted,off"; source: "elm";
+         script {
+            new m = get_int(slmode);
+            m &= ~INVERT; set_int(slmode, m);
+            eval_mode(m);
+         }
+      }
+      program {
+         signal: "elm,state,disabled"; source: "elm";
+         script {
+            new m = get_int(slmode);
+            m |= DISABLE; set_int(slmode, m);
+            eval_mode(m);
+         }
+      }
+      program {
+         signal: "elm,state,enabled"; source: "elm";
+         script {
+            new m = get_int(slmode);
+            m &= ~DISABLE; set_int(slmode, m);
+            eval_mode(m);
+         }
+      }
+   }
+#undef ICON
+#undef LABEL
+#undef END
+#undef UNITS
+#undef MASK
+#undef INVERT
+#undef DISABLE
+}
+
+group { name: "elm/slider/vertical/indicator/default";
+   alias: "elm/slider/vertical/indicator/disabled";
+   alias: "elm/slider/vertical/popup/default";
+   alias: "elm/slider/vertical/indicator/media_player/position/default";
+   alias: "elm/slider/vertical/indicator/media_player/position/flush";
+   alias: "elm/slider/vertical/indicator/media_player/volume/default";
+   alias: "elm/slider/vertical/indicator/media_player/volume/flush";
+   images.image: "darken_rounded_square.png" COMP;
+   parts {
+      part { name: "base"; type: SPACER;
+         scale: 1;
+         description { state: "default" 0.0;
+            fixed: 1 1;
+            min: 16 16;
+         }
+      }
+      part { name: "clip"; type: RECT;
+         description { state: "default" 0.0;
+            fixed: 1 1;
+            rel1.to: "elm.indicator";
+            rel1.offset: -100 -100;
+            rel2.to: "elm.indicator";
+            rel2.offset: 99 99;
+            visible: 0;
+         }
+         description { state: "visible" 0.0;
+            inherit: "default" 0.0;
+            visible: 1;
+         }
+      }
+      part { name: "bevel"; mouse_events: 0;
+         clip_to: "clip";
+         description { state: "default" 0.0;
+            rel1.offset: -12 -12;
+            rel1.to: "elm.indicator";
+            rel2.offset: 11 11;
+            rel2.to: "elm.indicator";
+            image.normal: "darken_rounded_square.png";
+            image.border: 15 15 15 15;
+            fill.smooth: 0;
+            visible: 0;
+         }
+         description { state: "visible" 0.0;
+            inherit: "default" 0.0;
+            visible: 1;
+         }
+      }
+      part { name: "elm.indicator"; type: TEXT; mouse_events: 0;
+         clip_to: "clip";
+         effect: SHADOW BOTTOM;
+         scale: 1;
+         description { state: "default" 0.0;
+            fixed: 1 1;
+            align: 0.0 0.5;
+            rel1.to: "base";
+            rel1.relative: 1.1 0.0;
+            rel1.offset: 11 0;
+            rel2.to: "base";
+            rel2.relative: 1.1 1.0;
+            rel2.offset: 11 -1;
+            color_class: "slider_indicator";
+            color: FN_COL_DEFAULT;
+            text { font: FNBD; size: 10;
+               min: 1 1;
+               align: 0.0 0.5;
+               text_class: "slider_indicator";
+               ellipsis: -1;
+            }
+            visible: 0;
+         }
+         description { state: "visible" 0.0;
+            inherit: "default" 0.0;
+            visible: 1;
+         }
+      }
+   }
+   programs {
+      program {
+         signal: "elm,popup,show"; source: "elm";
+         action:  STATE_SET "visible" 0.0;
+         target:  "elm.indicator";
+         target:  "bevel";
+      }
+      program {
+         signal: "elm,popup,hide"; source: "elm";
+         action:  STATE_SET "default" 0.0;
+         target:  "elm.indicator";
+         target:  "bevel";
+      }
+      program {
+         signal: "elm,popup,hide"; source: "elm";
+         action:  SIGNAL_EMIT "elm,popup,hide,done" "elm";
+      }
+      program {
+         signal: "elm,state,val,show"; source: "elm";
+         action:  STATE_SET "visible" 0.0;
+         target: "clip";
+      }
+      program {
+         signal: "elm,state,val,hide"; source: "elm";
+         action:  STATE_SET "default" 0.0;
+         target: "clip";
+      }
+      program {
+         signal: "elm,state,indicator,show"; source: "elm";
+         action:  STATE_SET "visible" 0.0;
+         target:  "elm.indicator";
+         target:  "bevel";
+      }
+      program {
+         signal: "elm,state,indicator,hide"; source: "elm";
+         action:  STATE_SET "visible" 0.0;
+         target:  "elm.indicator";
+         target:  "bevel";
+      }
+      program {
+         signal:  "elm,state,disabled"; source: "elm";
+         action:  STATE_SET "disabled" 0.0;
+         target:  "base";
+      }
+      program {
+         signal: "elm,state,enabled"; source: "elm";
+         action:  STATE_SET "default" 0.0;
+         target:  "base";
+      }
+   }
+}
+
+//Range
+
+group { name: "elm/slider/range/horizontal/default";
+   alias: "elm/slider/horizontal/disabled";
+   alias: "elm/slider/horizontal/media_player/position/default";
+   alias: "elm/slider/horizontal/media_player/position/flush";
+   alias: "elm/slider/horizontal/media_player/volume/default";
+   alias: "elm/slider/horizontal/media_player/volume/flush";
+   images.image: "slider_run_base_horiz.png" COMP;
+   images.image: "slider_run_bevel_horiz.png" COMP;
+   images.image: "slider_run_base_light_horiz.png" COMP;
+   images.image: "horiz_glow_run.png" COMP;
    images.image: "horiz_glow_range.png" COMP;
    images.image: "horiz_glow_run_rev.png" COMP;
    images.image: "knob_round_small_normal.png" COMP;
@@ -707,7 +2122,7 @@ group { name: "elm/slider/horizontal/default";
       }
       program {
          signal: "elm,state,text,hidden"; source: "elm";
-         script {         
+         script {
             new m = get_int(slmode);
             m &= ~LABEL; set_int(slmode, m);
             eval_mode(m);
@@ -723,7 +2138,7 @@ group { name: "elm/slider/horizontal/default";
       }
       program {
          signal: "elm,state,icon,hidden"; source: "elm";
-         script {         
+         script {
             new m = get_int(slmode);
             m &= ~ICON; set_int(slmode, m);
             eval_mode(m);
@@ -739,7 +2154,7 @@ group { name: "elm/slider/horizontal/default";
       }
       program { name: "end_hide";
          signal: "elm,state,end,hidden"; source: "elm";
-         script {         
+         script {
             new m = get_int(slmode);
             m &= ~END; set_int(slmode, m);
             eval_mode(m);
@@ -761,7 +2176,7 @@ group { name: "elm/slider/horizontal/default";
       program {
          signal: "elm,state,units,hidden"; source: "elm";
          action:  STATE_SET "default" 0.0;
-         script {         
+         script {
             new m = get_int(slmode);
             m &= ~UNITS; set_int(slmode, m);
             eval_mode(m);
@@ -782,7 +2197,7 @@ group { name: "elm/slider/horizontal/default";
       }
       program {
          signal: "elm,state,inverted,off"; source: "elm";
-         script {         
+         script {
             new m = get_int(slmode);
             m &= ~INVERT; set_int(slmode, m);
             eval_mode(m);
@@ -798,7 +2213,7 @@ group { name: "elm/slider/horizontal/default";
       }
       program {
          signal: "elm,state,enabled"; source: "elm";
-         script {         
+         script {
             new m = get_int(slmode);
             m &= ~DISABLE; set_int(slmode, m);
             eval_mode(m);
@@ -814,138 +2229,7 @@ group { name: "elm/slider/horizontal/default";
 #undef DISABLE
 }
 
-group { name: "elm/slider/horizontal/indicator/default";
-   alias: "elm/slider/horizontal/indicator/disabled";
-   alias: "elm/slider/horizontal/popup/default";
-   alias: "elm/slider/horizontal/indicator/media_player/position/default";
-   alias: "elm/slider/horizontal/indicator/media_player/position/flush"; 
-   alias: "elm/slider/horizontal/indicator/media_player/volume/default";
-   alias: "elm/slider/horizontal/indicator/media_player/volume/flush"; 
-   images.image: "darken_rounded_square.png" COMP;
-   parts {
-      part { name: "base"; type: SPACER;
-         scale: 1;
-         description { state: "default" 0.0;
-            fixed: 1 1;
-            min: 16 16;
-         }
-         description { state: "disabled" 0.0;
-            inherit: "default" 0.0;
-         }
-      }
-      part { name: "clip"; type: RECT;
-         description { state: "default" 0.0;
-            fixed: 1 1;
-            rel1.to: "elm.indicator";
-            rel1.offset: -100 -100;
-            rel2.to: "elm.indicator";
-            rel2.offset: 99 99;
-            visible: 0;
-         }
-         description { state: "visible" 0.0;
-            inherit: "default" 0.0;
-            visible: 1;
-         }
-      }
-      part { name: "bevel"; mouse_events: 0;
-         clip_to: "clip";
-         description { state: "default" 0.0;
-            rel1.offset: -12 -12;
-            rel1.to: "elm.indicator";
-            rel2.offset: 11 11;
-            rel2.to: "elm.indicator";
-            image.normal: "darken_rounded_square.png";
-            image.border: 15 15 15 15;
-            fill.smooth: 0;
-            visible: 0;
-         }
-         description { state: "visible" 0.0;
-            inherit: "default" 0.0;
-            visible: 1;
-         }
-      }
-      part { name: "elm.indicator"; type: TEXT; mouse_events: 0;
-         clip_to: "clip";
-         effect: SHADOW BOTTOM;
-         scale: 1;
-         description { state: "default" 0.0;
-            fixed: 1 1;
-            align: 0.5 1.0;
-            rel1.to: "base";
-            rel1.relative: 0.0 -0.1;
-            rel1.offset: 0 -12;
-            rel2.to: "base";
-            rel2.relative: 1.0 -0.1;
-            rel2.offset: -1 -12;
-            color_class: "slider_indicator";
-            color: FN_COL_DEFAULT;
-            text { font: FNBD; size: 10;
-               min: 1 1;
-               align: 0.5 1.0;
-               text_class: "slider_indicator";
-               ellipsis: -1;
-            }
-            visible: 0;
-         }
-         description { state: "visible" 0.0;
-            inherit: "default" 0.0;
-            visible: 1;
-         }
-      }
-   }
-   programs {
-      program {
-         signal: "elm,popup,show"; source: "elm";
-         action:  STATE_SET "visible" 0.0;
-         target:  "elm.indicator";
-         target:  "bevel";
-      }
-      program {
-         signal: "elm,popup,hide"; source: "elm";
-         action:  STATE_SET "default" 0.0;
-         target:  "elm.indicator";
-         target:  "bevel";
-      }
-      program {
-         signal: "elm,popup,hide"; source: "elm";
-         action:  SIGNAL_EMIT "elm,popup,hide,done" "elm";
-      }
-      program {
-         signal: "elm,state,val,show"; source: "elm";
-         action:  STATE_SET "visible" 0.0;
-         target: "clip";
-      }
-      program {
-         signal: "elm,state,val,hide"; source: "elm";
-         action:  STATE_SET "default" 0.0;
-         target: "clip";
-      }
-      program {
-         signal: "elm,state,indicator,show"; source: "elm";
-         action:  STATE_SET "visible" 0.0;
-         target:  "elm.indicator";
-         target:  "bevel";
-      }
-      program {
-         signal: "elm,state,indicator,hide"; source: "elm";
-         action:  STATE_SET "visible" 0.0;
-         target:  "elm.indicator";
-         target:  "bevel";
-      }
-      program {
-         signal:  "elm,state,disabled"; source: "elm";
-         action:  STATE_SET "disabled" 0.0;
-         target:  "base";
-      }
-      program {
-         signal: "elm,state,enabled"; source: "elm";
-         action:  STATE_SET "default" 0.0;
-         target:  "base";
-      }
-   }
-}
-
-group { name: "elm/slider/vertical/default";
+group { name: "elm/slider/range/vertical/default";
    alias: "elm/slider/vertical/disabled";
    alias: "elm/slider/vertical/media_player/position/default";
    alias: "elm/slider/vertical/media_player/position/flush";
@@ -1619,7 +2903,7 @@ group { name: "elm/slider/vertical/default";
       }
       program {
          signal: "elm,state,text,hidden"; source: "elm";
-         script {         
+         script {
             new m = get_int(slmode);
             m &= ~LABEL; set_int(slmode, m);
             eval_mode(m);
@@ -1635,7 +2919,7 @@ group { name: "elm/slider/vertical/default";
       }
       program {
          signal: "elm,state,icon,hidden"; source: "elm";
-         script {         
+         script {
             new m = get_int(slmode);
             m &= ~ICON; set_int(slmode, m);
             eval_mode(m);
@@ -1651,7 +2935,7 @@ group { name: "elm/slider/vertical/default";
       }
       program { name: "end_hide";
          signal: "elm,state,end,hidden"; source: "elm";
-         script {         
+         script {
             new m = get_int(slmode);
             m &= ~END; set_int(slmode, m);
             eval_mode(m);
@@ -1672,7 +2956,7 @@ group { name: "elm/slider/vertical/default";
       program {
          signal: "elm,state,units,hidden"; source: "elm";
          action:  STATE_SET "default" 0.0;
-         script {         
+         script {
             new m = get_int(slmode);
             m &= ~UNITS; set_int(slmode, m);
             eval_mode(m);
@@ -1692,7 +2976,7 @@ group { name: "elm/slider/vertical/default";
       }
       program {
          signal: "elm,state,inverted,off"; source: "elm";
-         script {         
+         script {
             new m = get_int(slmode);
             m &= ~INVERT; set_int(slmode, m);
             eval_mode(m);
@@ -1708,7 +2992,7 @@ group { name: "elm/slider/vertical/default";
       }
       program {
          signal: "elm,state,enabled"; source: "elm";
-         script {         
+         script {
             new m = get_int(slmode);
             m &= ~DISABLE; set_int(slmode, m);
             eval_mode(m);
@@ -1723,134 +3007,3 @@ group { name: "elm/slider/vertical/default";
 #undef INVERT
 #undef DISABLE
 }
-
-group { name: "elm/slider/vertical/indicator/default";
-   alias: "elm/slider/vertical/indicator/disabled";
-   alias: "elm/slider/vertical/popup/default";
-   alias: "elm/slider/vertical/indicator/media_player/position/default";
-   alias: "elm/slider/vertical/indicator/media_player/position/flush";
-   alias: "elm/slider/vertical/indicator/media_player/volume/default";
-   alias: "elm/slider/vertical/indicator/media_player/volume/flush";
-   images.image: "darken_rounded_square.png" COMP;
-   parts {
-      part { name: "base"; type: SPACER;
-         scale: 1;
-         description { state: "default" 0.0;
-            fixed: 1 1;
-            min: 16 16;
-         }
-         description { state: "disabled" 0.0;
-            inherit: "default" 0.0;
-         }
-      }
-      part { name: "clip"; type: RECT;
-         description { state: "default" 0.0;
-            fixed: 1 1;
-            rel1.to: "elm.indicator";
-            rel1.offset: -100 -100;
-            rel2.to: "elm.indicator";
-            rel2.offset: 99 99;
-            visible: 0;
-         }
-         description { state: "visible" 0.0;
-            inherit: "default" 0.0;
-            visible: 1;
-         }
-      }
-      part { name: "bevel"; mouse_events: 0;
-         clip_to: "clip";
-         description { state: "default" 0.0;
-            rel1.offset: -12 -12;
-            rel1.to: "elm.indicator";
-            rel2.offset: 11 11;
-            rel2.to: "elm.indicator";
-            image.normal: "darken_rounded_square.png";
-            image.border: 15 15 15 15;
-            fill.smooth: 0;
-            visible: 0;
-         }
-         description { state: "visible" 0.0;
-            inherit: "default" 0.0;
-            visible: 1;
-         }
-      }
-      part { name: "elm.indicator"; type: TEXT; mouse_events: 0;
-         clip_to: "clip";
-         effect: SHADOW BOTTOM;
-         scale: 1;
-         description { state: "default" 0.0;
-            fixed: 1 1;
-            align: 0.0 0.5;
-            rel1.to: "base";
-            rel1.relative: 1.1 0.0;
-            rel1.offset: 11 0;
-            rel2.to: "base";
-            rel2.relative: 1.1 1.0;
-            rel2.offset: 11 -1;
-            color_class: "slider_indicator";
-            color: FN_COL_DEFAULT;
-            text { font: FNBD; size: 10;
-               min: 1 1;
-               align: 0.0 0.5;
-               text_class: "slider_indicator";
-               ellipsis: -1;
-            }
-            visible: 0;
-         }
-         description { state: "visible" 0.0;
-            inherit: "default" 0.0;
-            visible: 1;
-         }
-      }
-   }
-   programs {
-      program {
-         signal: "elm,popup,show"; source: "elm";
-         action:  STATE_SET "visible" 0.0;
-         target:  "elm.indicator";
-         target:  "bevel";
-      }
-      program {
-         signal: "elm,popup,hide"; source: "elm";
-         action:  STATE_SET "default" 0.0;
-         target:  "elm.indicator";
-         target:  "bevel";
-      }
-      program {
-         signal: "elm,popup,hide"; source: "elm";
-         action:  SIGNAL_EMIT "elm,popup,hide,done" "elm";
-      }
-      program {
-         signal: "elm,state,val,show"; source: "elm";
-         action:  STATE_SET "visible" 0.0;
-         target: "clip";
-      }
-      program {
-         signal: "elm,state,val,hide"; source: "elm";
-         action:  STATE_SET "default" 0.0;
-         target: "clip";
-      }
-      program {
-         signal: "elm,state,indicator,show"; source: "elm";
-         action:  STATE_SET "visible" 0.0;
-         target:  "elm.indicator";
-         target:  "bevel";
-      }
-      program {
-         signal: "elm,state,indicator,hide"; source: "elm";
-         action:  STATE_SET "visible" 0.0;
-         target:  "elm.indicator";
-         target:  "bevel";
-      }
-      program {
-         signal:  "elm,state,disabled"; source: "elm";
-         action:  STATE_SET "disabled" 0.0;
-         target:  "base";
-      }
-      program {
-         signal: "elm,state,enabled"; source: "elm";
-         action:  STATE_SET "default" 0.0;
-         target:  "base";
-      }
-   }
-}
diff --git a/src/lib/elementary/elm_slider.c b/src/lib/elementary/elm_slider.c
index 2bb5d29303..326266a69c 100644
--- a/src/lib/elementary/elm_slider.c
+++ b/src/lib/elementary/elm_slider.c
@@ -748,7 +748,10 @@ _elm_slider_elm_widget_theme_apply(Eo *obj, Elm_Slider_Data *sd)
 
    if (_is_horizontal(sd->orientation))
      {
-        eina_stringshare_replace(&ld->group, "horizontal");
+        if (!sd->range_enable)
+          eina_stringshare_replace(&ld->group, "horizontal");
+        else
+          eina_stringshare_replace(&ld->group, "range/horizontal");
         if (sd->popup)
           _elm_theme_set(elm_widget_theme_get(obj), sd->popup,
                          "slider", "horizontal/popup",
@@ -760,7 +763,11 @@ _elm_slider_elm_widget_theme_apply(Eo *obj, Elm_Slider_Data *sd)
      }
    else
      {
-        eina_stringshare_replace(&ld->group, "vertical");
+        if (!sd->range_enable)
+          eina_stringshare_replace(&ld->group, "vertical");
+        else
+          eina_stringshare_replace(&ld->group, "range/vertical");
+
         if (sd->popup)
           _elm_theme_set(elm_widget_theme_get(obj), sd->popup,
                          "slider", "vertical/popup",
@@ -1231,6 +1238,8 @@ _elm_slider_range_enabled_set(Eo *obj, Elm_Slider_Data *sd, Eina_Bool enable)
    if (sd->range_enable == enable) return;
 
    sd->range_enable = enable;
+
+   elm_obj_widget_theme_apply(obj);
    if (sd->range_enable)
      {
         _popup_add(sd, obj, &sd->popup2, &sd->track2, sd->range_enable);