v2.0.1-alpha2

refactor(ci/cd): fix build step for npm publish

v2.0.1-alpha1

refactor(ci): match node version

DXB Slider v2.0.0: Simplify Your Code with Automatic DOM Generation

We are excited to announce the release of DXB Slider v2.0.0! This major update simplifies the integration process and reduces the amount of HTML code you need to write.

What's New

• Simplified HTML Structure: You no longer need to wrap your <input type="range"> elements with additional container divs. The slider now automatically generates the necessary DOM structure.

• Automatic DOM Construction: The JavaScript library now programmatically creates the required HTML elements around your range inputs, making your code cleaner and easier to maintain.

Breaking Changes

• Removal of Container Elements: The previous requirement for .dxb-slider-container and .dxb-slider-wrapper in your HTML has been removed. Continuing to use these may cause unexpected behavior.

Migration Instructions

To upgrade to v2.0.0, please follow these steps:

1. Update Your HTML Markup

Before (v1.x):

<div class="dxb-slider-container">
    <label for="exampleSlider">Example Slider</label>
    <div class="dxb-slider-wrapper">
        <div class="dxb-slider-track">
            <input type="range" id="exampleSlider" data-dxb-slider min="0" max="100" value="50">
        </div>
    </div>
</div>

After (v2.0.0):

<label for="exampleSlider">Example Slider</label>
<input type="range" id="exampleSlider" data-dxb-slider min="0" max="100" value="50">

• Action: Remove <div class="dxb-slider-container">, <div class="dxb-slider-wrapper">, and <div class="dxb-slider-track"> from your HTML.

2. Update Custom CSS (If Applicable)

If you have custom CSS that targets the old class selectors, update them accordingly.

• Before:

  .dxb-slider-container label {
      /* Your styles */
  }

• After:

  label {
      /* Your styles */
  }

3. Replace JavaScript and CSS Files

Ensure you are using the latest dxb-slider.min.js and dxb-slider.min.css files from v2.0.0.

4. Clear Browser Cache

After updating the files, clear your browser cache to make sure the new scripts and styles are loaded.

Fix bug with stepped range slider spawning unstepped number input

• Add step attribute to number input so that the up/down arrows trigget stepped changes

Dispatch event to range input when updating number input

When programmatically updateing range input, dispatch events for better upstream integration.
This solves the problem of unresponsive software that is monitoring input or change events on the range input and not getting any feedback when the number input is being updated, even though the range input itself does appear to change state as result of the number input changes.

DXB Slider 1.0.0: Initial Release - Accessible and Customizable Range Slider with RTL Support

Here are the release notes for version 1.0.0 of DXB Slider:

DXB Slider 1.0.0 Release Notes

We're excited to announce the initial release of DXB Slider, a lightweight, customizable range slider component with a programmatically added number input. This release focuses on providing a solid foundation for an accessible, easy-to-implement slider that supports both LTR and RTL layouts.

Features

• Customizable range slider with a dynamically added, synchronized number input
• Accessible design with ARIA attributes
• Namespaced CSS for easy integration
• Minimal JavaScript footprint
• Support for both LTR (Left-to-Right) and RTL (Right-to-Left) layouts
• Language-specific numeral display (pending broader browser adoption)
• Optimized for mobile devices with appropriate software keyboard support

Key Components

• Main JavaScript file: dxb-slider.js
• CSS file: dxb-slider.css
• Minified versions: dxb-slider.min.js and dxb-slider.min.css

Usage

To use DXB Slider, include the CSS and JavaScript files in your project. The slider can be initialized by adding the data-dxb-slider attribute to your range input element. For detailed usage instructions, please refer to the README:

## Installation

To use DXB Slider, include the CSS and JavaScript files in your project, and follow the usage instructions below.

## Usage

1.  Include the CSS in your `<head>` tag:
    
    ```
    <link rel="stylesheet" href="path/to/dxb-slider.min.css">
    ```
    
2.  Add the HTML structure for your slider:
    
    ```
    <div class="dxb-slider-container">
        <label id="mySliderLabel" for="mySlider">Slider Label</label>
        <div class="dxb-slider-wrapper">
            <div class="dxb-slider-track">
                <input type="range" id="mySlider" class="dxb-slider" 
                       min="0" max="100" value="50" step="1" 
                       data-dxb-slider
                       aria-labelledby="mySliderLabel">
            </div>
        </div>
    </div>
    ```
    
3.  Include the JavaScript at the end of your `<body>` tag:
    
    ```
    <script src="path/to/dxb-slider.min.js"></script>
    ```
    
4.  The sliders will be automatically initialized for all elements with the `data-dxb-slider` attribute, including those added dynamically after page load.
    
5.  The sliders will automatically adjust for mobile devices, displaying the appropriate software keyboard (numeric or decimal) based on the slider's configuration.

Customization

DXB Slider can be easily customized using CSS variables. For more information on customization options, see the README:

## Customization

You can customize the appearance of the slider by modifying the CSS variables in the `:root` selector:

:root {
--dxb-slider-width: 270px;
--dxb-slider-height: 5px;
--dxb-slider-thumb-size: 20px;
--dxb-slider-primary-color: #0550e6;
--dxb-slider-secondary-color: #dadfe7;
}

Browser Support

DXB Slider supports all modern browsers. Note that language-specific numeral features are currently best supported in Firefox.

License

DXB Slider is released under the GNU General Public License v2.0 (GPL-2.0). For more details, please see the LICENSE file in the repository.

We're looking forward to your feedback and contributions to make DXB Slider even better in future releases!