StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I've tried to create what you need. Please take a look <a href="http://simulator.su/demo/volume-slider/" rel="nofollow">here</a>.</p> <p>If it is what you're looking for, here is the code:</p> <pre><code><?xml version="1.0" encoding="utf-8"?> <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="group1_creationCompleteHandler(event)"> <fx:Script> <![CDATA[ import mx.events.FlexEvent; private static const BAR_HEIGHT:Number = 44; private static const BAR_WIDTH:Number = 5; private static const BAR_GAP:Number = 2; private static const BAR_COUNT:Number = 50; private static const BAR_COLOR_ACTIVE:uint = 0x00ff00; [Bindable] public var initialPercent:Number; private var totalBarHeight:Number; protected function group1_creationCompleteHandler(event:FlexEvent):void { totalBarHeight = BAR_HEIGHT * BAR_COUNT; drawBars(blackBars); update(initialPercent); } public function update(percent:Number):void { drawBars(greenBars, BAR_COLOR_ACTIVE, percent); } public function drawBars(where2draw:Group, color:uint = 0x000000, percent:Number = 100):void { //complete bars var completeBars:Number = Math.floor(BAR_COUNT * percent / 100); where2draw.graphics.clear(); for (var i:int = 0; i < completeBars; i++) { var barX:Number = (BAR_WIDTH + BAR_GAP) * i; where2draw.graphics.beginFill(color); where2draw.graphics.drawRect(barX, 0, BAR_WIDTH, BAR_HEIGHT); where2draw.graphics.endFill(); } //partial bars, if needed var reminderBarHeight:Number = totalBarHeight * percent / 100 - completeBars * BAR_HEIGHT; var barY:Number = BAR_HEIGHT - reminderBarHeight; var barX:Number = (BAR_WIDTH + BAR_GAP) * completeBars; where2draw.graphics.beginFill(color); where2draw.graphics.drawRect(barX, barY, BAR_WIDTH, reminderBarHeight); where2draw.graphics.endFill(); } ]]> </fx:Script> <s:Group id="blackBars"/> <s:Group id="greenBars"/> </s:Group> </code></pre> <p>Probably it is better to build it with ActionScript. I created it just to convey the idea.</p> <p>Speaking about the second component you need, it should be event easer. You can probably achieve that effect by drawing a gradient across your component and animating a mask whenever values are changing.</p> <p>Thanks!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload