Slider Container Alignment and Number Positioning Issue #5

New issue

Closed

opened 2024-11-16 10:46:50 +00:00 by revengeday · 0 comments

revengeday commented

2024-11-16 10:46:50 +00:00

Owner

The slider-container within the form does not align with the width of other form elements, leading to inconsistency in the layout. Additionally, the sliderValueDisplay spans display shifting text positions based on the character count (single, double, triple, or quadruple digits), causing the text to move dynamically.

Steps to Reproduce:

Navigate to the form section containing the slider.
Observe the width of the slider container in comparison to other form elements such as other inputs and buttons.
Adjust the slider value from single to multiple digits (e.g., 9 to 10 to 100 to 1000).
Notice the positional shift of the displayed value as the number of digits changes.

Expected Behavior:

The slider-container should align with the width of other form components for a consistent appearance.
The sliderValueDisplay should not shift its position regardless of the value's length, ensuring a stable and visually appealing interface.

Affected HTML Section:

<div class="slider-container">
    <label for="countSlider">Cyber Score:</label>
    <input type="range" id="countSlider" name="count" min="1" max="1000" value="250" step="1">
    <span id="sliderValueDisplay">250</span>
</div>

The `slider-container` within the form does not align with the width of other form elements, leading to inconsistency in the layout. Additionally, the `sliderValueDisplay` spans display shifting text positions based on the character count (single, double, triple, or quadruple digits), causing the text to move dynamically. Steps to Reproduce: 1. Navigate to the form section containing the slider. 2. Observe the width of the slider container in comparison to other form elements such as other inputs and buttons. 3. Adjust the slider value from single to multiple digits (e.g., 9 to 10 to 100 to 1000). 4. Notice the positional shift of the displayed value as the number of digits changes. Expected Behavior: - The `slider-container` should align with the width of other form components for a consistent appearance. - The `sliderValueDisplay` should not shift its position regardless of the value's length, ensuring a stable and visually appealing interface. Affected HTML Section: ```html <div class="slider-container"> <label for="countSlider">Cyber Score:</label> <input type="range" id="countSlider" name="count" min="1" max="1000" value="250" step="1"> <span id="sliderValueDisplay">250</span> </div> ```