@Override
 public void doLayout() {
   sizeInfo.width = getWidth();
   sizeInfo.height = getHeight();
   boxPainter = cssSkin.createBoxPainter(this, styleInfo, sizeInfo, "", CSSSkin.State.None);
   leftArrowPainter =
       cssSkin.createBoxPainter(
           this, leftArrowStyleInfo, leftArrowSizeInfo, "", CSSSkin.State.None, "left-arrow");
   rightArrowPainter =
       cssSkin.createBoxPainter(
           this, rightArrowStyleInfo, rightArrowSizeInfo, "", CSSSkin.State.None, "right-arrow");
   thumbPainter =
       cssSkin.createBoxPainter(
           this, thumbStyleInfo, thumbSizeInfo, "", CSSSkin.State.None, "thumb");
   trackPainter =
       cssSkin.createBoxPainter(
           this, trackStyleInfo, trackSizeInfo, "", CSSSkin.State.None, "track");
 }
  @Override
  public void draw(GFX g) {
    if (!isVisible()) return;
    boxPainter.draw(g, styleInfo, sizeInfo, "");

    Bounds leftArrowBounds = new Bounds(0, 0, arrowLength, getHeight());
    Bounds rightArrowBounds = new Bounds(getWidth() - arrowLength, 0, arrowLength, getHeight());
    Bounds thumbBounds = calculateThumbBounds();
    if (isVertical()) {
      leftArrowBounds = new Bounds(0, 0, getWidth(), arrowLength);
      rightArrowBounds = new Bounds(0, getHeight() - arrowLength, getWidth(), arrowLength);
    }

    Bounds trackBounds = getTrackBounds();
    trackSizeInfo.width = trackBounds.getWidth();
    trackSizeInfo.height = trackBounds.getHeight();
    g.translate(trackBounds.getX(), trackBounds.getY());
    trackPainter.draw(g, trackStyleInfo, trackSizeInfo, "");
    g.translate(-trackBounds.getX(), -trackBounds.getY());

    leftArrowSizeInfo.width = leftArrowBounds.getWidth();
    leftArrowSizeInfo.height = leftArrowBounds.getHeight();
    leftArrowPainter.draw(g, leftArrowStyleInfo, leftArrowSizeInfo, "");

    g.translate(rightArrowBounds.getX(), rightArrowBounds.getY());
    rightArrowSizeInfo.width = rightArrowBounds.getWidth();
    rightArrowSizeInfo.height = rightArrowBounds.getHeight();
    rightArrowPainter.draw(g, rightArrowStyleInfo, rightArrowSizeInfo, "");
    g.translate(-rightArrowBounds.getX(), -rightArrowBounds.getY());

    g.translate(thumbBounds.getX(), thumbBounds.getY());
    thumbSizeInfo.width = thumbBounds.getWidth();
    thumbSizeInfo.height = thumbBounds.getHeight();
    thumbPainter.draw(g, thumbStyleInfo, thumbSizeInfo, "");
    g.translate(-thumbBounds.getX(), -thumbBounds.getY());

    // draw the arrows
    /*
    g.setPaint(new FlatColor(0x303030));
    if(isVertical()) {
        GraphicsUtil.fillUpArrow(g,2,2,10);
        GraphicsUtil.fillDownArrow(g,2,getHeight()-2-10,10);
    } else {
        GraphicsUtil.fillLeftArrow(g,2,2,10);
        GraphicsUtil.fillRightArrow(g,getWidth()-2-10,2,10);
    }
    */
  }