### Install Svelte Range Slider Pips

Source: https://github.com/simeydotme/svelte-range-slider-pips/blob/main/README.md

Installs the svelte-range-slider-pips package as a development dependency using either Yarn or npm. This is the initial step to include the slider component in your project.

```bash
yarn add svelte-range-slider-pips --dev          # or
npm install svelte-range-slider-pips --save-dev  # if you prefer npm
```

--------------------------------

### Installing Older Version of Svelte Range Slider Pips

Source: https://github.com/simeydotme/svelte-range-slider-pips/blob/main/README.md

Provides instructions for installing version 2.3.1 of the Svelte Range Slider Pips component, which is compatible with Svelte 3. This is a fallback for projects unable to upgrade to Svelte 4/5. It includes commands for both Yarn and npm package managers.

```bash
yarn add svelte-range-slider-pips@2.3.1 --dev
# or
npm install svelte-range-slider-pips@2.3.1 --save-dev
```

--------------------------------

### Svelte Range Slider Keyboard Navigation Improvements

Source: https://github.com/simeydotme/svelte-range-slider-pips/blob/main/docs/upgrade.md

This example showcases the improved keyboard navigation in the Svelte Range Slider component, version 4. It illustrates how Ctrl/Cmd + Arrow keys move the slider by 1% of the total range, while Shift + Arrow or PageUp/PageDown keys move it by 10%. The example assumes a slider with min=0, max=100, and step=1, demonstrating the impact of these navigation changes on unit movement.

```svelte
<RangeSlider
  min={0}
  max={100}
  step={1}
  // Now Ctrl/Cmd + Arrow moves by 1 unit
  // Shift + Arrow or PageUp/PageDown moves by 10 units
/>
```

--------------------------------

### Initialize Svelte Range Slider Pips with Event Listener (JavaScript)

Source: https://github.com/simeydotme/svelte-range-slider-pips/blob/main/tests/vanilla/esm.html

Initializes the Svelte Range Slider Pips component and sets up an event listener to capture changes. This script targets a specific HTML element for the slider and an output element for displaying values. It requires the 'svelte-range-slider-pips' module.

```javascript
import RangeSliderPips from './node_modules/svelte-range-slider-pips/dist/range-slider-pips.mjs';
document.onreadystatechange = function () {
  if (document.readyState === 'complete') {
    // create and initialise the slider
    const slider = document.querySelector('.my-slider');
    const rangeSliderPips = new RangeSliderPips({
      target: slider,
      props: {
        values: [-7, 7],
        pips: true,
        first: 'label',
        last: 'label',
        range: true,
        min: -10,
        max: 10
      }
    });

    // listen for changes to the slider and update the output
    const output = document.querySelector('#value-output');
    rangeSliderPips.$on('change', function (e) {
      output.innerHTML = e.detail.values;
    });
  }
};
```

--------------------------------

### CSS Example: State and Modifier Class Changes (v3 vs v4)

Source: https://github.com/simeydotme/svelte-range-slider-pips/blob/main/docs/upgrade.md

Illustrates the difference in CSS selectors between v3 and v4 of the Svelte Range Slider Pips component. This shows the updated class names for targeting selected pips, highlighting a migration step.

```css
.rangeSlider .pip.selected {
  background-color: blue;
}

/* After (v4): */
.rangeSlider .rsPip.rsSelected {
  background-color: blue;
}

```

--------------------------------

### Configure Range Slider with Gap Controls

Source: https://github.com/simeydotme/svelte-range-slider-pips/blob/main/docs/upgrade.md

Example of using new rangeGapMin and rangeGapMax properties to control the minimum and maximum distance between handles in a range slider. This functionality requires `range={true}` and can be combined with `pushy={true}`.

```svelte
<RangeSlider
  range={true}
  rangeGapMin={10}
  rangeGapMax={50}
  pushy={true}
/>
```

--------------------------------

### Svelte Range Slider Pips Event Handling

Source: https://github.com/simeydotme/svelte-range-slider-pips/blob/main/README.md

Demonstrates how to handle events dispatched by the Svelte Range Slider Pips component. Events include 'start', 'change', and 'stop', providing details about the slider's state at the time of the event. These events are crucial for reacting to user interactions. The `event.detail` object contains information like the active handle, values, and previous values.

```html
<script>
  import RangeSlider from 'svelte-range-slider-pips';

  function handleStart(event) {
    console.log('Slider start:', event.detail);
  }

  function handleChange(event) {
    console.log('Slider change:', event.detail);
  }

  function handleStop(event) {
    console.log('Slider stop:', event.detail);
  }
</script>

<RangeSlider
  on:start={handleStart}
  on:change={handleChange}
  on:stop={handleStop}
/>
```

--------------------------------

### Svelte Range Slider: Event Handling for User Interactions

Source: https://context7.com/simeydotme/svelte-range-slider-pips/llms.txt

Listens to 'start', 'change', and 'stop' events to track the user interaction lifecycle with the slider. These events provide details about the active handle, current value, and previous values.

```svelte
<script>
  import { RangeSlider } from 'svelte-range-slider-pips';

  let values = [50];
  let eventLog = [];

  function handleStart(event) {
    eventLog = [...eventLog, `Started: Handle ${event.detail.activeHandle}`];
  }

  function handleChange(event) {
    const { activeHandle, value, values, previousValue } = event.detail;
    eventLog = [...eventLog, `Changed from ${previousValue} to ${value}`];
  }

  function handleStop(event) {
    const { value, startValue } = event.detail;
    eventLog = [...eventLog, `Stopped: ${startValue} → ${value}`];
  }
</script>

<RangeSlider
  bind:values
  pips
  on:start={handleStart}
  on:change={handleChange}
  on:stop={handleStop}
/>

<ul>
  {#each eventLog as log}
    <li>{log}</li>
  {/each}
</ul>
```

--------------------------------

### Install Svelte Range Slider Pips v4

Source: https://github.com/simeydotme/svelte-range-slider-pips/blob/main/docs/upgrade.md

Update the svelte-range-slider-pips package to version 4 using npm, yarn, or pnpm.

```bash
npm install svelte-range-slider-pips@4
# or
yarn add svelte-range-slider-pips@4
# or
pnpm add svelte-range-slider-pips@4
```

--------------------------------

### Svelte Component: Applying Custom Theme Colors

Source: https://github.com/simeydotme/svelte-range-slider-pips/blob/main/docs/upgrade.md

Demonstrates how to apply custom theme colors to the RangeSlider component in Svelte. It shows examples using the `style` prop for direct CSS declarations and the `class` prop for Tailwind CSS classes.

```svelte
<RangeSlider
  darkmode="force"
  style="
    --slider-accent: #0ea5e9;
    --slider-bg: #222;
  "
/>

<RangeSlider
  darkmode="auto"
  class="
    [--slider-accent:var(--color-sky-500)]
    [--slider-accent-100:var(--color-sky-300)]
    [--slider-base:var(--color-slate-500)]
    [--slider-base-100:var(--color-slate-300)]
    [--slider-bg:var(--color-slate-200)]
  "
/>

```

--------------------------------

### Custom Range Value Formatting

Source: https://github.com/simeydotme/svelte-range-slider-pips/blob/main/docs/upgrade.md

Example of using the `rangeFormatter` property to provide custom formatting for the range float display. This property accepts a function that receives the two range values and their percentages, allowing for complete control over the output, including HTML strings.

```svelte
<RangeSlider
  range={true}
  rangeFloat={true}
  rangeFormatter={(v1, v2) => `${v1} to ${v2}`}
/>
```

--------------------------------

### Svelte Range Slider Input Validation Example

Source: https://github.com/simeydotme/svelte-range-slider-pips/blob/main/docs/upgrade.md

This Svelte snippet demonstrates the enhanced input validation in version 4 of the Svelte Range Slider component. It shows how to set min, max, and precision properties, and includes ariaLabels for accessibility. The component automatically corrects invalid min/max values (e.g., min >= max) and ensures ariaLabels is an array, providing console feedback for developers.

```svelte
<RangeSlider
  min={0}
  max={100}
  precision={2}
  ariaLabels={['Minimum value', 'Maximum value']}
/>
```

--------------------------------

### Enable Range Area Dragging in Svelte Range Slider

Source: https://github.com/simeydotme/svelte-range-slider-pips/blob/main/docs/upgrade.md

This snippet demonstrates how to enable dragging of the range area between handles in the Svelte Range Slider component. The 'draggy' property must be set to true, and the slider must be configured as a range slider (range={true}). Event handlers for 'start', 'change', and 'stop' are included to log the range values during interaction.

```svelte
<RangeSlider
  range={true}
  draggy={true}
  on:start={({ values }) => console.log('Range drag started:', values)}
  on:change={({ values }) => console.log('Range changed:', values)}
  on:stop={({ values }) => console.log('Range drag ended:', values)}
/>
```

--------------------------------

### Vanilla JavaScript Instantiation

Source: https://context7.com/simeydotme/svelte-range-slider-pips/llms.txt

Shows how to initialize the RangeSliderPips component in vanilla JavaScript by targeting a specific DOM element and passing configuration properties such as values, pips, min, max, and step.

```html
<script src="./node_modules/svelte-range-slider-pips/dist/range-slider-pips.js"></script>
<div id="my-slider"></div>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const slider = new RangeSliderPips({
      target: document.querySelector('#my-slider'),
      props: {
        values: [50],
        pips: true,
        min: 0,
        max: 100,
        step: 1
      }
    });
  });
</script>
```

--------------------------------

### Multi-Thumb Configuration in Svelte

Source: https://context7.com/simeydotme/svelte-range-slider-pips/llms.txt

Demonstrates creating a Svelte range slider with multiple handles using the 'values' array. Configurable with min, max, step, pips, 'all' label display, 'float' for floating labels, and 'hoverable' for interactive handles.

```svelte
<script>
  import { RangeSlider } from 'svelte-range-slider-pips';
  let values = [20, 50, 80];
</script>

<RangeSlider
  bind:values
  min={0}
  max={100}
  step={5}
  pips
  all="label"
  float
  hoverable
/>

<p>Selected values: {values.join(', ')}</p>
```

--------------------------------

### Usage as a Vanilla JS Component

Source: https://github.com/simeydotme/svelte-range-slider-pips/blob/main/README.md

Shows how to use the RangeSlider component in a plain JavaScript environment by including the distributed script. It initializes the slider on a target div with specified properties upon DOMContentLoaded.

```html
<!-- in the <head> of your html -->
<script src="./js/vendor/svelte-range-slider-pips.js" />

<!-- in the <body> of your html -->
<div id="my-slider"></div>

<script>
  // this script will be run when the DOM is ready
  // and the slider is initialised
  document.addEventListener('DOMContentLoaded', () => {
    var mySlider = new RangeSliderPips({
      target: document.querySelector('#my-slider'),
      props: { values: [50], pips: true }
    });
  });
</script>
```

--------------------------------

### Basic Svelte Integration

Source: https://context7.com/simeydotme/svelte-range-slider-pips/llms.txt

Demonstrates how to import and use the RangeSlider component within a Svelte application, utilizing reactive data binding for the 'values' property and enabling pips.

```svelte
<script>
  import { RangeSlider } from 'svelte-range-slider-pips';
  let values = [50];
</script>

<RangeSlider bind:values pips />
```

--------------------------------

### Svelte Range Slider Pips Configuration Options

Source: https://github.com/simeydotme/svelte-range-slider-pips/blob/main/README.md

Defines the available configuration options for the Svelte Range Slider Pips component. These options control aspects like value formatting, animation physics, precision, and DOM element binding. Dependencies include the Svelte framework. Inputs are various data types (function, boolean, object, number, element), and outputs are the configured behavior of the slider.

```html
<script>
  import RangeSlider from 'svelte-range-slider-pips';

  let sliderValue = 50;
  let rangeFormatter = (v1, v2, p1, p2) => `${Math.round(p1)}% to ${Math.round(p2)}%`;
  let spring = true;
  let springValues = { stiffness: 0.15, damping: 0.4 };
  let precision = 2;
  let sliderElement;
</script>

<RangeSlider
  bind:value={sliderValue}
  rangeFormatter={rangeFormatter}
  spring={spring}
  springValues={springValues}
  precision={precision}
  bind:slider={sliderElement}
/>
```

--------------------------------

### React Integration with Event Handling

Source: https://context7.com/simeydotme/svelte-range-slider-pips/llms.txt

Illustrates integrating the Svelte Range Slider component into a React application. It uses refs for DOM manipulation and state management, and demonstrates listening to the 'change' event to update React state.

```jsx
import React, { useState, useEffect, useRef } from 'react';
import RangeSlider from 'svelte-range-slider-pips';

export default function MyComponent() {
  const [values, setValues] = useState([25, 75]);
  const sliderRef = useRef();
  const nodeRef = useRef();

  useEffect(() => {
    if (!sliderRef.current) {
      sliderRef.current = new RangeSlider({
        target: nodeRef.current,
        props: {
          values: values,
          pips: true,
          first: 'label',
          last: 'label',
          range: true,
          min: 0,
          max: 100,
          step: 5
        }
      });

      sliderRef.current.$on('change', (e) => {
        setValues(e.detail.values);
      });
    }
  }, []);

  function handleUpdate() {
    const newVals = [values[0] + 10, values[1] + 10];
    setValues(newVals);
    sliderRef.current.$set({ values: newVals });
  }

  return (
    <div>
      <h2>Values: {values.join(' - ')}</h2>
      <div ref={nodeRef}></div>
      <button onClick={handleUpdate}>Adjust Range</button>
    </div>
  );
}
```

--------------------------------

### Initialize Range Slider with Pips (JavaScript)

Source: https://github.com/simeydotme/svelte-range-slider-pips/blob/main/tests/vanilla/umd.html

This snippet shows how to create and initialize a RangeSliderPips component in JavaScript. It selects a target element, sets initial properties like values, pips, labels, and range, and then listens for change events to update an output element.

```javascript
document.onreadystatechange = function () {
  if (document.readyState === 'complete') {
    // create and initialise the slider
    const slider = document.querySelector('.my-slider');
    const rangeSliderPips = new RangeSliderPips({
      target: slider,
      props: {
        values: [-7, 7],
        pips: true,
        first: 'label',
        last: 'label',
        range: true,
        min: -10,
        max: 10
      }
    });

    // listen for changes to the slider and update the output
    const output = document.querySelector('#value-output');
    rangeSliderPips.$on('change', function (e) {
      output.innerHTML = e.detail.values;
    });
  }
};
```

--------------------------------

### Import Svelte Range Slider Pips as JS Module

Source: https://github.com/simeydotme/svelte-range-slider-pips/blob/main/README.md

Demonstrates how to import the Svelte Range Slider Pips component as a JavaScript module and instantiate it with target DOM element and props. This approach is suitable for vanilla JS, Vue, and React applications using ES module imports.

```javascript
import RangeSlider from './node_modules/svelte-range-slider-pips/dist/svelte-range-slider-pips.mjs';

var mySlider = new RangeSlider({
  target: node, // js reference to a DOM element
  props: { values: [50], pips: true }
});
```

--------------------------------

### Basic Usage in Svelte 4

Source: https://github.com/simeydotme/svelte-range-slider-pips/blob/main/README.md

Demonstrates the fundamental usage of the RangeSlider component within a Svelte 4 application. It imports the component and renders it with initial values and pips enabled.

```svelte
<script>
  import RangeSlider from 'svelte-range-slider-pips';
</script>

<RangeSlider values={[50]} pips />
```

--------------------------------

### Svelte Range Slider Pips Configuration

Source: https://github.com/simeydotme/svelte-range-slider-pips/blob/main/README.md

Configuration options for the svelte-range-slider-pips component.

```APIDOC
## Svelte Range Slider Pips Properties

This section details the various properties available for the svelte-range-slider-pips component.

### Properties

- **first** (`Boolean`/`String`) - Optional - Default: `false`. Whether to show a pip or label for the first value on the slider. Use `first='label'` to display the value as a label.
- **last** (`Boolean`/`String`) - Optional - Default: `false`. Whether to show a pip or label for the last value on the slider. Use `last='label'` to display the value as a label.
- **rest** (`Boolean`/`String`) - Optional - Default: `false`. Whether to show a pip or label for all other values. Use `rest='label'` to display the value as a label.
- **all** (`Boolean`/`String`) - Optional - Default: `false`. Whether to show a pip or label for all values. This is equivalent to combining `first`, `last`, and `rest`. Use `all='label'` to display the value as a label.
- **prefix** (`String`) - Optional - Default: `""`. A string to prepend to all displayed values.
- **suffix** (`String`) - Optional - Default: `""`. A string to append to all displayed values.
- **limits** (`Array`) - Optional - Default: `[0, 100]`. An array of two numbers to set limits on the slider handles. This overrides `min` and `max` for handle positioning but uses them for range display.
- **reversed** (`Boolean`) - Optional - Default: `false`. Reverses the orientation of min/max values.
- **hoverable** (`Boolean`) - Optional - Default: `true`. Enables hover styles for handles and pips/values.
- **disabled** (`Boolean`) - Optional - Default: `false`. Disables slider interactions and events.
- **id** (`String`) - Optional - Default: `""`. Assigns a unique ID to the slider for CSS styling.
- **class** (`String`) - Optional - Default: `""`. Adds custom CSS classes to the slider.
- **style** (`String`) - Optional - Default: `undefined`. Allows passing CSS variables or style declarations directly to the slider.
- **darkmode** (`False`/`"auto"`/`"force"`) - Optional - Default: `false`. Set to `"auto"` for automatic system dark mode detection, or `"light"` or `"dark"` to force a specific mode.
- **ariaLabels** (`Array`) - Optional - Default: `[]`. An array of strings to be used for the `aria-label` attribute on the slider handles.
- **formatter** (`Function`) - Optional - Default: `(v,i,p) => v`. A function to re-format values before they are displayed. `v` is the value, `i` is the pip index, and `p` is the percentage.
- **handleFormatter** (`Function`) - Optional - Default: `formatter`. A function to re-format values on the handle/float before they are displayed. Defaults to the `formatter` function. `v` is the value, `i` is the handle index, and `p` is the percentage.

### Example Usage

```svelte
<script>
  import RangeSlider from 'svelte-range-slider-pips';

  let value = [20, 80];
</script>

<RangeSlider
  bind:value={value}
  first={'label'}
  suffix="%"
  limits={[0, 1000]}
  formatter={(v) => Math.round(v)}
/>
```
```

--------------------------------

### Configure Spring Animation in Svelte

Source: https://context7.com/simeydotme/svelte-range-slider-pips/llms.txt

Customize handle animation behavior using spring physics parameters like stiffness and damping. This configuration is applied directly within Svelte components using the `spring` and `springValues` props.

```svelte
<script>
  import { RangeSlider } from 'svelte-range-slider-pips';
  let values = [50];
</script>

<RangeSlider
  bind:values
  spring
  springValues={{ stiffness: 0.3, damping: 0.5 }}
  pips
/>
```

--------------------------------

### Integrate Svelte Range Slider with jQuery

Source: https://context7.com/simeydotme/svelte-range-slider-pips/llms.txt

Use the slider component within legacy applications that rely on jQuery. This involves including the necessary JavaScript files and instantiating the slider imperatively using the `RangeSliderPips` class.

```html
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="./node_modules/svelte-range-slider-pips/dist/range-slider-pips.js"></script>

<div class="my-slider"></div>
<div id="value-output">Values: 25, 75</div>

<script>
$(function() {
  const slider = document.querySelector('.my-slider');
  const rangeSlider = new RangeSliderPips({
    target: slider,
    props: {
      values: [25, 75],
      pips: true,
      first: 'label',
      last: 'label',
      range: true,
      min: 0,
      max: 100
    }
  });

  const $output = $('#value-output');
  rangeSlider.$on('change', function(e) {
    $output.html('Values: ' + e.detail.values.join(', '));
  });
});
</script>
```

--------------------------------

### Vue.js Integration with Watchers

Source: https://context7.com/simeydotme/svelte-range-slider-pips/llms.txt

Explains how to embed the Svelte Range Slider component within a Vue.js application. It utilizes `ref` for DOM referencing, `onMounted` for initialization, and `watch` for synchronizing Vue's reactive state with the slider's properties.

```vue
<script setup lang="ts">
import { ref, watch, onMounted } from 'vue';
import RangeSlider from 'svelte-range-slider-pips';

const values = ref([30, 70]);
const nodeRef = ref(null);
let sliderInstance;

onMounted(() => {
  if (nodeRef.value) {
    sliderInstance = new RangeSlider({
      target: nodeRef.value,
      props: {
        values: values.value,
        pips: true,
        first: 'label',
        last: 'label',
        range: true,
        min: 0,
        max: 100,
        suffix: '%'
      }
    });

    sliderInstance.$on('change', (e) => {
      values.value = e.detail.values;
    });

    watch(values, () => {
      sliderInstance.$set({ values: values.value });
    });
  }
});
</script>

<template>
  <div id="slider-container" ref="nodeRef"></div>
  <p>Selected range: {{ values[0] }}% - {{ values[1] }}%</p>
</template>
```

--------------------------------

### Svelte Range Slider Pips Styling with CSS Variables

Source: https://github.com/simeydotme/svelte-range-slider-pips/blob/main/README.md

Illustrates how to style the Svelte Range Slider Pips component using CSS variables and the `font-size` property. Customization of colors and element dimensions can be achieved through these CSS properties. The `id` prop can be used for more specific targeting. Note the CSS class name prefixing with 'rs' in v4.

```css
/* Example of overriding default styles */
.rangeSlider {
  --rs-bg-color: #e0e0e0;
  --rs-progress-color: #4caf50;
  --rs-handle-color: #2196f3;
  font-size: 16px; /* Controls the scale of the slider elements */
}

/* Targeting a specific slider using its id */
#my-unique-slider .rangeSlider {
  --rs-handle-color: #ff9800;
}
```

--------------------------------

### Svelte Range Slider: Pip Display Configuration

Source: https://context7.com/simeydotme/svelte-range-slider-pips/llms.txt

Controls which pips and labels are displayed using 'first', 'last', 'rest', and 'all' properties. This allows fine-grained control over the visibility of markers and their labels on the slider.

```svelte
<script>
  import { RangeSlider } from 'svelte-range-slider-pips';
  let values = [50];
</script>

<RangeSlider
  bind:values
  pips
  pipstep={5}
  first="label"
  last="label"
  rest={true}
  min={0}
  max={100}
/>
```

--------------------------------

### Update Slider Values Programmatically (JavaScript)

Source: https://context7.com/simeydotme/svelte-range-slider-pips/llms.txt

Update slider values and other properties dynamically after initialization using the `$set` method. This is useful for controlling the slider state based on application logic or user interactions in vanilla JavaScript or framework integrations.

```javascript
const slider = new RangeSliderPips({
  target: document.querySelector('#slider'),
  props: { values: [50], pips: true }
});

// Update values programmatically
slider.$set({ values: [75] });

// Update multiple props at once
slider.$set({
  values: [25, 75],
  range: true,
  step: 5
});
```

--------------------------------

### Svelte Range Slider: Limits and Constraints

Source: https://context7.com/simeydotme/svelte-range-slider-pips/llms.txt

Restricts handle movement to a specific range within the slider using the 'limits' prop, which accepts an array of two numbers defining the minimum and maximum allowed values for the handles.

```svelte
<script>
  import { RangeSlider } from 'svelte-range-slider-pips';
  let values = [50];
</script>

<RangeSlider
  bind:values
  min={0}
  max={100}
  limits={[20, 80]}
  pips
  all="label"
/>
```

--------------------------------

### Svelte Range Slider: Step Function with Custom Intervals

Source: https://context7.com/simeydotme/svelte-range-slider-pips/llms.txt

Defines step intervals for snapping values to specific increments using the 'step' prop. This ensures that the slider values adhere to predefined increments.

```svelte
<script>
  import { RangeSlider } from 'svelte-range-slider-pips';
  let values = [25];
</script>

<RangeSlider
  bind:values
  min={0}
  max={100}
  step={25}
  pips
  all="label"
/>
```

--------------------------------

### Range Mode with Pushy Handles in Svelte

Source: https://context7.com/simeydotme/svelte-range-slider-pips/llms.txt

Configures a Svelte range slider to operate in 'range' mode with 'pushy' handles, where handles maintain a minimum and maximum distance. Includes label display for the first and last handles, and pips.

```svelte
<script>
  import { RangeSlider } from 'svelte-range-slider-pips';
  let values = [25, 75];
</script>

<RangeSlider
  bind:values
  range
  pushy
  rangeGapMin={10}
  rangeGapMax={50}
  min={0}
  max={100}
  pips
  first="label"
  last="label"
/>
```

--------------------------------

### Svelte Range Slider: Accessibility with ARIA Labels

Source: https://context7.com/simeydotme/svelte-range-slider-pips/llms.txt

Provides descriptive ARIA labels for screen reader support using the 'ariaLabels' prop. This ensures better accessibility for users relying on assistive technologies.

```svelte
<script>
  import { RangeSlider } from 'svelte-range-slider-pips';
  let values = [30, 70];
</script>

<RangeSlider
  bind:values
  range
  ariaLabels={['Minimum value', 'Maximum value']}
  pips
/>
```

--------------------------------

### Svelte Range Slider: Custom Value Formatting with Currency

Source: https://context7.com/simeydotme/svelte-range-slider-pips/llms.txt

Applies custom formatters to display slider values with specific formats, such as currency symbols and locale-specific number formatting. The 'formatter' prop accepts a function that receives the value, index, and percentage.

```svelte
<script>
  import { RangeSlider } from 'svelte-range-slider-pips';

  let values = [5000];

  function currencyFormatter(value, index, percent) {
    return `$${value.toLocaleString()}`;
  }
</script>

<RangeSlider
  bind:values
  min={0}
  max={10000}
  step={100}
  pips
  all="label"
  formatter={currencyFormatter}
  float
/>
```

--------------------------------

### Enable Range Float Display

Source: https://github.com/simeydotme/svelte-range-slider-pips/blob/main/docs/upgrade.md

Demonstrates enabling the `rangeFloat` property to display the values between the range slider handles. This feature respects existing `prefix` and `suffix` properties and works with regular and reversed ranges.

```svelte
<RangeSlider
  range={true}
  rangeFloat={true}
  prefix="$"
/>
```

--------------------------------

### Control Float Precision in Svelte

Source: https://context7.com/simeydotme/svelte-range-slider-pips/llms.txt

Set the decimal precision for handling floating-point values accurately. The `precision` prop defines the number of decimal places for displayed values and step increments, useful for financial or scientific applications.

```svelte
<script>
  import { RangeSlider } from 'svelte-range-slider-pips';
  let values = [3.14159];
</script>

<RangeSlider
  bind:values
  min={0}
  max={10}
  step={0.01}
  precision={4}
  pips
  all="label"
/>
```

--------------------------------

### Light Theme CSS Variables for Svelte Range Slider

Source: https://github.com/simeydotme/svelte-range-slider-pips/blob/main/docs/upgrade.md

Defines the CSS custom properties used for theming the Svelte Range Slider component in its light mode. These variables control the accent colors, base colors, background, and foreground.

```css
:root {
  --slider-accent: #4a40d4;
  --slider-accent-100: #838de7;
  --slider-base: #99a2a2;
  --slider-base-100: #b9c2c2;
  --slider-bg: #d7dada;
  --slider-fg: #3f3e4f;
}
```

--------------------------------

### CSS Variables for Dark Theme

Source: https://github.com/simeydotme/svelte-range-slider-pips/blob/main/docs/upgrade.md

Defines CSS variables for customizing the dark theme of the range slider. These variables control accent colors, base colors, and background/foreground colors in dark mode.

```css
--slider-dark-accent: #6070fc;
--slider-dark-accent-100: #7a7fab;
--slider-dark-base: #82809f;
--slider-dark-base-100: #595868;
--slider-dark-bg: #3f3e4f;
--slider-dark-fg: #d7dada;

```

--------------------------------

### Svelte Range Slider: Dark Mode Support

Source: https://context7.com/simeydotme/svelte-range-slider-pips/llms.txt

Enables automatic dark mode detection or forces a specific theme using the 'darkmode' prop. Set to 'auto' for detection or 'true'/'false' to force a theme.

```svelte
<script>
  import { RangeSlider } from 'svelte-range-slider-pips';
  let values = [60];
</script>

<RangeSlider
  bind:values
  pips
  darkmode="auto"
/>
```

--------------------------------

### Enable Dark Mode in Svelte Range Slider

Source: https://github.com/simeydotme/svelte-range-slider-pips/blob/main/docs/upgrade.md

Demonstrates how to enable dark mode for the Svelte Range Slider component using the `darkmode` prop. It shows options for disabling dark mode, automatically matching the system's preference, and forcing dark mode.

```svelte
<script>
  import RangeSlider from 'svelte-range-slider-pips';
</script>

<!-- Default (Light mode) -->
<RangeSlider darkmode={false} />

<!-- Automatic (Match system) -->
<RangeSlider darkmode="auto" />

<!-- Force Dark Mode -->
<RangeSlider darkmode="force" />
```

--------------------------------

### Svelte Range Slider: Custom CSS Styling

Source: https://context7.com/simeydotme/svelte-range-slider-pips/llms.txt

Applies custom styles and CSS variables for complete visual customization of the slider. This includes setting an ID, class, and inline styles or CSS variables for elements like the range and handles.

```svelte
<script>
  import { RangeSlider } from 'svelte-range-slider-pips';
  let values = [50];
</script>

<RangeSlider
  bind:values
  id="custom-slider"
  class="my-slider-class"
  style="--range-slider: #4A40D4; --range-handle: #ffffff; --range-handle-focus: #6E5CFF;"
  pips
/>

<style>
  :global(.my-slider-class) {
    font-size: 14px;
  }
</style>
```

--------------------------------

### CSS: Update Float Positioning for Svelte Range Slider

Source: https://github.com/simeydotme/svelte-range-slider-pips/blob/main/docs/upgrade.md

Illustrates the CSS changes required for updating float element positioning in the Svelte range slider component. It shows how to transition from using 'transform: translate()' to the 'translate' CSS property, which is necessary due to component updates in v4 for better performance and compatibility.

```css
/* Before (v3) */
.rangeSlider .rangeHandle.active .rangeFloat {
  transform: translate(-50%, -10px);
}

/* After (v4) */
.rangeSlider .rangeHandle.rsActive .rangeFloat {
  translate: -50% -10px 0.01px;
}
```

--------------------------------

### Svelte Range Slider: Floating Labels

Source: https://context7.com/simeydotme/svelte-range-slider-pips/llms.txt

Displays floating labels above the active handles, showing their current values. Enable this feature with the 'float' and 'rangeFloat' props.

```svelte
<script>
  import { RangeSlider } from 'svelte-range-slider-pips';
  let values = [40, 80];
</script>

<RangeSlider
  bind:values
  range
  float
  rangeFloat
  min={0}
  max={100}
  suffix=" units"
/>
```

--------------------------------

### Svelte: Control Range Slider Animations and Custom Classes

Source: https://github.com/simeydotme/svelte-range-slider-pips/blob/main/docs/upgrade.md

Shows how to control the animation of slider handles and apply custom CSS classes to a Svelte range slider. The 'spring' property defaults to true and disables animations when set to false. The 'class' property allows adding custom CSS classes to the base slider element for styling or framework integration.

```svelte
<RangeSlider
  spring={false}  // Disable animations for instant updates
  class="my-custom-slider"  // Add custom class
/>

<RangeSlider
  spring={true}  // Enable animations (default)
  class="custom-theme"  // Add custom class
/>
```

--------------------------------

### Svelte Range Slider: Draggable Range Area

Source: https://context7.com/simeydotme/svelte-range-slider-pips/llms.txt

Enables users to drag the entire range area, shifting both handles simultaneously. This feature requires the 'range' and 'draggy' props to be enabled.

```svelte
<script>
  import { RangeSlider } from 'svelte-range-slider-pips';
  let values = [30, 60];
</script>

<RangeSlider
  bind:values
  range
  draggy
  min={0}
  max={100}
  pips
  pipstep={10}
/>
```

--------------------------------

### Svelte Range Slider: Reversed Direction

Source: https://context7.com/simeydotme/svelte-range-slider-pips/llms.txt

Reverses the standard min/max orientation, positioning higher values on the left (for horizontal sliders) or bottom (for vertical sliders). Use the 'reversed' prop for this functionality.

```svelte
<script>
  import { RangeSlider } from 'svelte-range-slider-pips';
  let values = [30];
</script>

<RangeSlider
  bind:values
  reversed
  min={0}
  max={100}
  pips
/>
```

--------------------------------

### Svelte Range Slider: Vertical Orientation

Source: https://context7.com/simeydotme/svelte-range-slider-pips/llms.txt

Renders the slider in a vertical orientation, with lower values positioned at the bottom. This is achieved by setting the 'vertical' prop.

```svelte
<script>
  import { RangeSlider } from 'svelte-range-slider-pips';
  let values = [40];
</script>

<div style="height: 300px;">
  <RangeSlider
    bind:values
    vertical
    min={0}
    max={100}
    pips
    all="label"
  />
</div>
```

--------------------------------

### Svelte Range Slider: Disabled State

Source: https://context7.com/simeydotme/svelte-range-slider-pips/llms.txt

Disables user interactions with the slider while maintaining its visual display. The 'disabled' prop can be a boolean, and its state can be toggled dynamically.

```svelte
<script>
  import { RangeSlider } from 'svelte-range-slider-pips';
  let values = [45];
  let isDisabled = true;
</script>

<RangeSlider
  bind:values
  disabled={isDisabled}
  pips
/>

<button on:click={() => isDisabled = !isDisabled}>
  Toggle Enabled
</button>
```

--------------------------------

### Svelte: Control Range Slider Hover Effects with Disabled State

Source: https://github.com/simeydotme/svelte-range-slider-pips/blob/main/docs/upgrade.md

Demonstrates how to control hover effects on a Svelte range slider based on its 'hoverable' and 'disabled' states. Hover effects are only visible when 'hoverable' is true and the slider is not disabled. This affects both handle and range bar hover states.

```svelte
<RangeSlider
  hoverable={true}
  disabled={true}  // Hover effects will not show
/>

<RangeSlider
  hoverable={true}
  disabled={false} // Hover effects will show
/>

<RangeSlider
  hoverable={false}
  disabled={false} // Hover effects will not show
/>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.