An ADA issue: the range slider bar not visible in High Contrast mode

[dmitrii-fediuk]

The range slider bar for selecting distance on store locator page is not properly visible when viewed in high contrast mode.
This makes the distance selection difficult for the user.

kitchencollection.com/storelocator/index/index

Code snippet

<div class="form-group col-md-8 col-sm-8 col-xs-12 slider-range-min"><div id="slider-range-min" class="slider-range-bar slider-range ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 2.45123%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 2.45123%;"></a></div><!-- 2018-10-25 Dmitry Fedyuk https://www.upwork.com/fl/mage2pro An ADA issue: the control's «reset» state is not announced by the screen reader when user selects the «Reset» button on the «Store Locator» page https://github.com/kitchencollection-com/core/issues/30 --><span class="show-unit slider-range-amount" tabindex="0">50 Mi</span></div>

Rationale

High contrast settings benefit users with low vision, color blindness or other visual disabilities.
The High Contrast themes present in Windows change or invert web page background and text colors.
If there are elements/controls present on the webpage which gets truncate, gets disappear or shows different states while high contrast mode is ON, then the affected functionality will become inaccessible or hard to use for a user having low vision, or other visual disabilities and relies on high contrast mode for accessing web applications.

Recommendations

Provide a background to the

having id="slider-range-min", using high contrast media query.

[dmitrii-fediuk]

It is a regression of An ADA issue: «Range slider bar not visible in High Contrast mode»