Bug 34290 - Native Slider: Vertical slider cannot be styled
Summary: Native Slider: Vertical slider cannot be styled
Status: UNCONFIRMED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Forms (show other bugs)
Version: 528+ (Nightly build)
Hardware: All OS X 10.6
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2010-01-28 16:24 PST by Shannon Norrell
Modified: 2010-01-28 16:43 PST (History)
3 users (show)

See Also:

Attachments
Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Shannon Norrell 2010-01-28 16:24:09 PST 
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>