Bug 34295 - Native Slider: Vertical slider thumb image is incorrect
Summary: Native Slider: Vertical slider thumb image is incorrect
Status: UNCONFIRMED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Forms (show other bugs)
Version: 528+ (Nightly build)
Hardware: PC OS X 10.5
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2010-01-28 17:25 PST by Shannon Norrell
Modified: 2010-01-28 17:25 PST (History)
2 users (show)

See Also:


Attachments
Vertical sliderThumb with corrected blue highlight (648 bytes, image/png)
2010-01-28 17:25 PST, Shannon Norrell
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Shannon Norrell 2010-01-28 17:25:45 PST
Created attachment 47662 [details]
Vertical sliderThumb with corrected blue highlight

The image for the sliderThumb on a vertical <input type="range"> Native Slider should have a blue "aqua" highlight that runs vertically.

The desired optics are to emulate looking through a blue glass button to the sliderTrack beneath it.  As such, the darker blue highlight in the sliderThumb should run vertically like the sliderTrack.

Now, you have it right where the little gray tracking bits to the left/right (for horizontal) or above/below (for vertical) appear on the sliderThumb, but the blue highlight is not right for vertical sliderThumbs.

I have attached a corrected image for your convenience.

shannon norrell

TEST HARNESS:
==========
<!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">
/* Vertical Slider */
input[type="range"].verticalSlider{
  -webkit-appearance: slider-vertical;
  width:20px;
}
input[type="range"].verticalSlider::-webkit-slider-thumb {
  -webkit-appearance: sliderthumb-vertical;
}
  </style>
</head>
<body>

<input type="range" style="height:100px;" class="verticalSlider" />
</body>
</html>