# Slider Component Behaviour

**URL:** <https://forum.kirupa.com/t/slider-component-behaviour/309089>\
**Category:** flash\
**Created:** [May 6, 2010, 3:36pm UTC](https://forum.kirupa.com/t/slider-component-behaviour/309089 "2010-05-06T15:36:31Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![tcambron](https://avatars.discourse-cdn.com/v4/letter/t/67e7ee/32.png) [@tcambron](https://forum.kirupa.com/u/tcambron)\
**Post date:** [May 6, 2010, 3:36pm UTC](https://forum.kirupa.com/t/slider-component-behaviour/309089/1 "2010-05-06T15:36:31Z")

</div>

Greetings,

I am using the slider component to scale an image. The function scaleFromCenter() is activated by a slider component. Currently the image is loaded in at 100%. Although the user slides the thumb down (to the left) the image scales up (over 100%). I would like to scale the image down (\< 100%) when the thumb is moved to the left and then scale back up to and only to 100% when the thumb is moved back to the right. Any thoughts? Code below:

```
                              // slider functionality

```

var slider:Slider = new Slider();  
slider.addEventListener(SliderEvent.CHANGE, scaleFromCenter);  
slider.width = 210;  
slider.snapInterval = 10;  
slider.maximum = loaderUI.height;  
slider.minimum = 50;  
slider.value = loaderUI.height;  
slider.move(130,255)  
slider.liveDragging = true;  
addChild(slider);

// scale image from center  
function scaleFromCenter(e:SliderEvent) {  
// if width = x then scale down  
var ptScalePoint = new Point(loaderUI.x + loaderUI.width/2, loaderUI.y +  
loaderUI.height/2)  
var sx:Number;  
var sy:Number;  
var m:Matrix=loaderUI.transform.matrix;  
m.tx -= ptScalePoint.x;  
m.ty -= ptScalePoint.y;  
m.scale(e.target.value / 6,e.target.value / 6);  
m.tx += ptScalePoint.x;  
m.ty += ptScalePoint.y;  
loaderUI.transform.matrix = m;  
}

//scaleFromCenter(loaderUI, 2, 2, ptScalePoint);

function scaleObject(e:SliderEvent):void{  
loaderUI.scaleX = e.target.value / 5;  
loaderUI.scaleY = e.target.value / 5;  
}

The function scaleFromCenter() is activated by a slider component. Currently the image is loaded in at 100%. Although the user slides the thumb down (to the left) the image scales up (over 100%). I would like to scale the image down (\< 100%) when the thumb is moved to the left and then scale back up to and only to 100% when the thumb is moved back to the right. Any thoughts? Thank you for your time. Code below:

```
                              // slider functionality

```

var slider:Slider = new Slider();  
slider.addEventListener(SliderEvent.CHANGE, scaleFromCenter);  
slider.width = 210;  
slider.snapInterval = 10;  
slider.maximum = loaderUI.height;  
slider.minimum = 50;  
slider.value = loaderUI.height;  
slider.move(130,255)  
slider.liveDragging = true;  
addChild(slider);

// scale image from center  
function scaleFromCenter(e:SliderEvent) {  
// if width = x then scale down  
var ptScalePoint = new Point(loaderUI.x + loaderUI.width/2, loaderUI.y +  
loaderUI.height/2)  
var sx:Number;  
var sy:Number;  
var m:Matrix=loaderUI.transform.matrix;  
m.tx -= ptScalePoint.x;  
m.ty -= ptScalePoint.y;  
m.scale(e.target.value / 6,e.target.value / 6);  
m.tx += ptScalePoint.x;  
m.ty += ptScalePoint.y;  
loaderUI.transform.matrix = m;  
}

//scaleFromCenter(loaderUI, 2, 2, ptScalePoint);

function scaleObject(e:SliderEvent):void{  
loaderUI.scaleX = e.target.value / 5;  
loaderUI.scaleY = e.target.value / 5;  
}