Search Flex Components Free

Custom Search

January 23, 2008

Styling the HSlider control using CSS

The following example shows how you can style a HSlider (or VSlider) control in Flex using Cascading Style Sheets (CSS).




<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

layout="vertical"

verticalAlign="middle"

backgroundColor="white">



<mx:Style>

@font-face{

src: url("./fonts/arial.ttf");

fontFamily: "ArialEmbedded";

}



.MyLabel {

fontFamily: ArialEmbedded;

fontSize: 15;

fontWeight: normal;

}



.MyDataTip {

backgroundAlpha: 1.0;

backgroundColor: haloBlue;

color: white;

cornerRadius: 10;

fontWeight: bold;

letterSpacing: 1;

}



.MySlider {

dataTipOffset: 0;

dataTipPrecision: 0;

dataTipPlacement: left;

dataTipStyleName: MyDataTip;

showTrackHighlight: true;

labelStyleName: MyLabel;

}

</mx:Style>



<mx:Array id="labelArr">

<mx:Number>-10</mx:Number>

<mx:Number>0</mx:Number>

<mx:Number>10</mx:Number>

<mx:Number>20</mx:Number>

</mx:Array>



<mx:HSlider id="slider"

minimum="-10"

maximum="20"

labels="{labelArr}"

snapInterval="1"

tickInterval="10"

styleName="MySlider" />

</mx:Application>






Related Flex Tutorials