how do I use a vslider as the scrollbar for a list?

Question

how do I use a vslider as the scrollbar for a list? I've got this, but can't figure it out from here:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"    
           xmlns:mx="library://ns.adobe.com/flex/mx"     
           xmlns:s="library://ns.adobe.com/flex/spark"  height="100%" width="100%">

<s:VSlider id="slider" minimum="0" maximum="{listy.height}" liveDragging="true"/>

<s:List id="listy" width="50%" height="100">
    <s:layout>
        <s:VerticalLayout id="vLayout" verticalScrollPosition="{slider.value}" />
    </s:layout>

    <mx:ArrayCollection>
        <fx:String>Flash</fx:String> 
        <fx:String>Director</fx:String> 
        <fx:String>Dreamweaver</fx:String> 
        <fx:String>ColdFusion</fx:String> 
        <fx:String>Flash</fx:String> 
        <fx:String>Director</fx:String> 
        <fx:String>Dreamweaver</fx:String> 
        <fx:String>ColdFusion</fx:String> 
        <fx:String>Flash</fx:String> 
        <fx:String>Director</fx:String> 
        <fx:String>Dreamweaver</fx:String> 
        <fx:String>ColdFusion</fx:String> 
    </mx:ArrayCollection>
</s:List>
</s:Application>

EDIT: Using Nate's suggestion below, I've now got it working but it shows both the vslider as well as the default scrollbar. How do I hide the default scrollbar? I tried setting verticalScrollPolicy="off" but that didn't work. thx

Answer 1

It's totally possible, and I aims to proove it! All joking aside, here it is working with just some simple binding, you were very close!

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"    
               xmlns:mx="library://ns.adobe.com/flex/mx"     
               xmlns:s="library://ns.adobe.com/flex/spark"  height="100%" width="100%">

    <s:Group>
        <s:layout>
            <s:HorizontalLayout/>
        </s:layout>

        <s:List id="listy" width="50%" height="100" 
                change="slider.value=listy.layout.verticalScrollPosition" creationComplete="
                listy.dataGroup.addEventListener(MouseEvent.MOUSE_WHEEL, function():void{
                    slider.value=listy.layout.verticalScrollPosition}
                );">
            <s:layout>
                <s:VerticalLayout id="vLayout" verticalScrollPosition="{slider.value}" />
            </s:layout>

            <mx:ArrayCollection>
                <fx:String>Flash</fx:String> 
                <fx:String>Director</fx:String> 
                <fx:String>Dreamweaver</fx:String> 
                <fx:String>ColdFusion</fx:String> 
                <fx:String>Flash</fx:String> 
                <fx:String>Director</fx:String> 
                <fx:String>Dreamweaver</fx:String> 
                <fx:String>ColdFusion</fx:String> 
                <fx:String>Flash</fx:String> 
                <fx:String>Director</fx:String> 
                <fx:String>Dreamweaver</fx:String> 
                <fx:String>ColdFusion</fx:String> 
            </mx:ArrayCollection>
        </s:List>

        <s:VSlider id="slider" height="{listy.height}" 
                   minimum="0" maximum="{listy.dataGroup.contentHeight - listy.height}" 
                   showDataTip="false" scaleY="-1" liveDragging="true"/> 

    </s:Group>
</s:Application>

Ping me if you don't get the how and why of it :)