[Webkit-unassigned] [Bug 34290] New: Native Slider: Vertical slider cannot be styled

Thu Jan 28 16:24:09 PST 2010

https://bugs.webkit.org/show_bug.cgi?id=34290

           Summary: Native Slider: Vertical slider cannot be styled
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: All
        OS/Version: Mac OS X 10.6
            Status: UNCONFIRMED
          Severity: Normal
          Priority: P2
         Component: Forms
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: webdood at technologist.com
                CC: adele at apple.com, marchant at mac.com,
                    webdood at technologist.com

It is not possible to style an <input type="range"> "Native Slider" when it is
in a vertical orientation.

SETUP:
=====
I am calling the components of an <input type="range"> ("Native Slider") the
"sliderTrack" and the "sliderThumb".

Apparently, it is not possible to style the sliderThumb without also styling
the sliderTrack.  OK fine.

In order to style a sliderTrack, you have to tell it "-webkit-appearance:
none;" an then provide style for what the sliderTrack will look like. For
example:

.verticalSliderSliderThumbAbove {
  -webkit-appearance: none;
  background-color:green;
  width:20px;
}

Likewise, in order to style the sliderThumb,  you have to tell it
"-webkit-appearance: none;" an then provide style for what the sliderThumb will
look like. For example:

.verticalSliderSliderThumbAbove::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 9px;
  height: 9px;
  background-color:red;
}

HOWEVER, since the sliderThumb determines its behavior (ie to slide
horizontally or vertically) from it's sliderTrack "parent"'s -webkit-appearance
attribute and, since that attribute must be set to "none" in order to style it,
the sliderThumb will always assume that it belongs to a parent with a
-webkit-appearance: slider-horizontal. setting. 

EXPECTED:
=======
sliderThumb should slide vertically

GOT:
===
SliderThumb assumes it belongs to a horizontal slider and slides horizontally.

Here is a test harness to demonstrate the situation:
================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>HTML5 Slider (input type="range") Test</title>
  <style type ="text/css">
input[type="range"] {
  outline:solid 1px red;    
}

/* Horizontal Slider */
input[type="range"].horizontalSlider{
  -webkit-appearance: slider-horizontal;

}
input[type="range"].horizontalSlider::-webkit-slider-thumb {
  -webkit-appearance: sliderthumb-horizontal;
}
.horizontalSliderSliderThumbAbove {
  -webkit-appearance: none;
  background-color:blue;
  height:10px;
}
.horizontalSliderSliderThumbAbove::-webkit-slider-thumb {
  -webkit-appearance: sliderthumb-horizontal;
  width: 16px;
  height: 16px;
  position:relative;
  background-color:red;
}

/* Vertical Slider */
input[type="range"].verticalSlider{
  -webkit-appearance: slider-vertical;
  width:20px;
}
input[type="range"].verticalSlider::-webkit-slider-thumb {
  -webkit-appearance: sliderthumb-vertical;
}

.verticalSliderSliderThumbAbove {
  -webkit-appearance: none;
  background-color:green;
  width:20px;
}
.verticalSliderSliderThumbAbove::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 9px;
  height: 9px;
  background-color:red;
}

</style>
</head>
<body>
<input type="range" style="width:300px;" class="horizontalSlider"><br/><br/>
<input type="range" style="width:300px;"
class="horizontalSliderSliderThumbAbove"><br/>

<br/>

<div style="position:absolute;left:100px;">
  <input type="range" style="height:100px;" class="verticalSlider" />
</div>

<div style="position:absolute;left:30px;">
  <input type="range" style="height:100px;"
class="verticalSliderSliderThumbAbove" />
</div>

</body>
</html>

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.