Applying a Synth Look and Feel to Sliders?

I have a bunch of sliders that I am trying to apply a custom thumb to. The dimensions of it are 12x20, and I am applying it using a synth look and feel with the code below. This displays the thumb correctly for horizontal sliders, but once I make a vertical one the thumb gets distorted on the edges. Is there any better way to do this? Also, The thumb pressed code doesn't do anything, I would assume the reason for that is that sliderThumbs don't have开发者_如何学Go a "pressed state"? Is there a way to make the L&F change on a slider when it is pressed? Thanks beforehand!!!

Cheers, Lukas

<!-- Make and Bind a SliderThumb style -->
<style id="sliderStyle">

    <state>
      <property key="Slider.paintValue" type="boolean" value="false"/>
      <property key="Slider.thumbWidth" type="integer" value="12"/>  
      <property key="Slider.thumbHeight" type="integer" value="21"/>
    </state>

</style>

<bind style="sliderStyle" type="region" key="slider" />


<style id="SliderTrackStyle">
    <opaque value="FALSE"/>
</style>
<bind style="SliderTrackStyle" type="region" key="sliderTrack" />

<style id="sliderThumbStyle">

    <state>
       <imagePainter method="sliderThumbBackground" path="Images/SliderThumb.png"
         sourceInsets="0 0 0 0"/>
    </state>

   <state value="PRESSED">
       <imagePainter method="sliderThumbBackground" path="Images/SliderThumbPressed.png"
         sourceInsets="0 0 0 0"/>
   </state>

</style>


<bind style="sliderThumbStyle" type="region" key="sliderThumb" />

Use Vector graphics. On one of my apps, I originally used png files, the same as you. When I switched to Vector graphics, the edges didn't tear when used on smaller buttons.