### Icon Configuration Examples

Source: https://github.com/mattieha/slider-button-card/blob/main/README.md

Demonstrates different ways to configure the icon within the slider-button-card. Includes minimal setup for default icon behavior and overriding the icon with a custom one.

```yaml
icon:
  tap_action:
    action: more-info
```

```yaml
icon:
  icon: mdi:lightbulb
  tap_action:
    action: more-info
```

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

### Action Button Configuration Examples

Source: https://github.com/mattieha/slider-button-card/blob/main/README.md

Provides examples for configuring the action button. This includes setting it to toggle mode, showing it, using a custom mode with specific tap actions, and customizing its icon and service calls.

```yaml
action_button:
  mode: toggle
  show: true
```

```yaml
action_button:
  mode: custom
  show: true
  tap_action:
    action: toggle
```

```yaml
action_button:
  mode: custom
  show: true
  icon: mdi:palette
  tap_action:
    action: call-service
    service: scene.turn_on
    service_data:
      entity_id: scene.test
```

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

### Minimal Working Configuration

Source: https://github.com/mattieha/slider-button-card/blob/main/README.md

The most basic configuration to get the slider-button-card working. It requires a valid entity and specifies basic slider and icon behaviors. This setup is suitable for simple on/off control.

```yaml
type: custom:slider-button-card
entity: light.couch
slider:
  direction: left-right
  background: gradient
icon:
  tap_action:
    action: more-info
action_button:
  mode: toggle
```

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

### Light Controller Examples for Slider Button Card

Source: https://context7.com/mattieha/slider-button-card/llms.txt

Demonstrates how to configure the slider-button-card to control different light attributes like brightness, color temperature, hue, and saturation. It shows example configurations for each attribute type.

```typescript
import { LightController } from './controllers/light-controller';
import { LightAttributes } from './types';

// Example: Using the light controller with different attributes
const config: SliderButtonCardConfig = {
  type: 'custom:slider-button-card',
  entity: 'light.bedroom',
  slider: {
    direction: 'left-right',
    background: 'gradient',
    use_state_color: true,
    attribute: 'brightness_pct', // Options: brightness_pct, brightness, color_temp, hue, saturation
    min: 0,
    max: 100,
    step: 1
  }
};

// Color temperature control
const colorTempConfig: SliderButtonCardConfig = {
  type: 'custom:slider-button-card',
  entity: 'light.living_room',
  slider: {
    attribute: 'color_temp',
    direction: 'left-right',
    background: 'gradient',
    use_state_color: true
  }
};

// Hue control
const hueConfig: SliderButtonCardConfig = {
  type: 'custom:slider-button-card',
  entity: 'light.rgb_strip',
  slider: {
    attribute: 'hue',
    direction: 'left-right',
    background: 'gradient',
    use_state_color: true,
    min: 0,
    max: 360
  }
};
```

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

### Configure Cover Control with Custom Actions (YAML)

Source: https://github.com/mattieha/slider-button-card/blob/main/README.md

Example for a cover entity, setting the direction to top-bottom and background to striped. Includes a custom icon for the action button to toggle.

```yaml
type: custom:slider-button-card
entity: cover.living_cover
slider:
  direction: top-bottom
  background: striped
icon:
  show: true
  tap_action:
    action: more-info
action_button:
  tap_action:
    action: toggle
  mode: custom
  icon: mdi:swap-vertical
name: Cover
```

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

### Configure Fan Control with Icon Rotation (YAML)

Source: https://github.com/mattieha/slider-button-card/blob/main/README.md

Example configuration for a fan entity. The icon auto-rotates based on fan speed, and specific actions are defined for the icon and action button.

```yaml
type: custom:slider-button-card
entity: fan.living_fan
slider:
  direction: left-right
  background: triangle
  show_track: true
icon:
  tap_action:
    action: more-info
action_button:
  tap_action:
    action: toggle
  mode: custom
name: Fan
```

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

### Control Light Brightness and Color Temperature

Source: https://context7.com/mattieha/slider-button-card/llms.txt

Configure a light entity to control specific attributes like color temperature or brightness using the slider. This example sets up a desk lamp with a brightness slider from 0 to 100 in 5% steps.

```yaml
type: custom:slider-button-card
entity: light.desk_lamp
name: Desk Lamp
slider:
  direction: left-right
  background: gradient
  use_state_color: true
  attribute: brightness_pct
  min: 0
  max: 100
  step: 5
icon:
  tap_action:
    action: more-info
action_button:
  mode: toggle
```

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

### Compact Mode for Full-Width Layouts

Source: https://context7.com/mattieha/slider-button-card/llms.txt

Configure the slider-button-card in compact mode to display the name and state inline, ideal for full-width dashboard layouts. This example shows a compact configuration for a hallway light.

```yaml
type: custom:slider-button-card
entity: light.hallway
name: Hallway Light
compact: true
show_name: true
show_state: true
slider:
  direction: left-right
  background: gradient
  use_state_color: true
icon:
  show: true
action_button:
  mode: toggle
```

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

### Custom Service Call for Automation

Source: https://context7.com/mattieha/slider-button-card/llms.txt

Define a custom service call action for advanced automation scenarios. This example configures a living room light to call the 'scene.turn_on' service with specific entity IDs for different tap actions.

```yaml
type: custom:slider-button-card
entity: light.living_room
name: Living Room
slider:
  direction: left-right
  background: gradient
icon:
  tap_action:
    action: call-service
    service: scene.turn_on
    service_data:
      entity_id: scene.movie_time
action_button:
  mode: custom
  icon: mdi:palette
  tap_action:
    action: call-service
    service: scene.turn_on
    service_data:
      entity_id: scene.bright_mode
```

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

### Custom Controller for Entity State Management

Source: https://context7.com/mattieha/slider-button-card/llms.txt

Extend the base Controller class to manage custom entity states and value calculations. This TypeScript example shows how to create a `CustomController` that interacts with a custom domain service to set entity values.

```typescript
import { Controller } from './controllers/controller';
import { SliderButtonCardConfig } from './types';

// Example: Extending the base controller for a custom entity type
class CustomController extends Controller {
  _value = 0;
  _targetValue = 0;
  _min = 0;
  _max = 100;
  _step = 1;
  _invert = false;

  // Override value getter to provide custom state logic
  get _value(): number {
    if (!this.stateObj) {
      return 0;
    }
    // Custom logic to extract value from entity state
    return this.stateObj.attributes.custom_attribute || 0;
  }

  // Override value setter to handle state changes
  set _value(value: number) {
    this._hass.callService('custom_domain', 'set_value', {
      entity_id: this.stateObj.entity_id,
      value: value
    });
  }

  // Override label to customize display text
  get label(): string {
    return `${this.targetValue} units`;
  }
}

// Usage in card configuration
const config: SliderButtonCardConfig = {
  type: 'custom:slider-button-card',
  entity: 'custom_domain.my_entity',
  slider: {
    direction: 'left-right',
    background: 'gradient',
    min: 0,
    max: 100,
    step: 5
  }
};
```

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

### Grid Layout for Dashboard Organization

Source: https://context7.com/mattieha/slider-button-card/llms.txt

Arrange multiple slider-button-cards within a grid layout for improved dashboard organization. This example demonstrates a 4-column grid featuring various entity types like lights, fans, blinds, and switches.

```yaml
type: grid
columns: 4
square: false
cards:
  - type: custom:slider-button-card
    entity: light.living_room
    slider:
      direction: left-right
      background: gradient
      use_state_color: true
    icon:
      use_state_color: true
      tap_action:
        action: more-info
    action_button:
      mode: toggle
  - type: custom:slider-button-card
    entity: fan.bedroom
    slider:
      direction: left-right
      background: triangle
      show_track: true
    action_button:
      mode: custom
  - type: custom:slider-button-card
    entity: cover.blinds
    slider:
      direction: top-bottom
      background: striped
    action_button:
      mode: custom
      icon: mdi:swap-vertical
  - type: custom:slider-button-card
    entity: switch.outlet
    slider:
      toggle_on_click: true
      background: custom
    action_button:
      mode: toggle
```

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

### Switch Entity with Toggle-Only Behavior

Source: https://context7.com/mattieha/slider-button-card/llms.txt

Example of configuring the Slider Button Card for a switch entity to function purely as a toggle button, disabling slider functionality. It uses a custom background and a toggle action on the action button.

```yaml
type: custom:slider-button-card
entity: switch.kitchen_outlet
name: Kitchen Outlet
slider:
  direction: left-right
  background: custom
  toggle_on_click: true
  use_state_color: false
icon:
  use_state_color: true
  tap_action:
    action: more-info
action_button:
  mode: custom
  tap_action:
    action: toggle
```

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

### Climate Entity with Temperature Control Slider

Source: https://context7.com/mattieha/slider-button-card/llms.txt

Example configuration for the Slider Button Card controlling a climate entity, offering a temperature slider and custom styling. It includes options for icon tap actions and a custom toggle action button.

```yaml
type: custom:slider-button-card
entity: climate.living_room_thermostat
name: Thermostat
slider:
  direction: left-right
  background: triangle
  show_track: true
  use_state_color: false
icon:
  tap_action:
    action: more-info
action_button:
  mode: custom
  tap_action:
    action: toggle
```

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

### Custom CSS Styling with Card Mod

Source: https://context7.com/mattieha/slider-button-card/llms.txt

Apply custom CSS variables to override the default styling of the slider-button-card using Card Mod. This example sets custom colors for various elements like icon, labels, and states for a bedroom light.

```yaml
type: custom:slider-button-card
entity: light.bedroom
style: |
  :host {
    --icon-color: #ff6b6b;
    --label-color-on: #ffffff;
    --label-color-off: #aaaaaa;
    --state-color-on: #4ecdc4;
    --state-color-off: #95a5a6;
    --action-icon-color-on: #f39c12;
    --action-icon-color-off: #7f8c8d;
    --action-spinner-color: #3498db;
  }
slider:
  direction: left-right
  background: gradient
icon:
  tap_action:
    action: more-info
action_button:
  mode: toggle
```

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

### Controller Factory for Dynamic Controller Instantiation

Source: https://context7.com/mattieha/slider-button-card/llms.txt

Illustrates the usage of the ControllerFactory to automatically create the correct controller instance based on the entity's domain. This simplifies card initialization by abstracting controller selection.

```typescript
import { ControllerFactory } from './controllers/get-controller';
import { SliderButtonCardConfig } from './types';

// Example: Factory automatically selects the correct controller
const lightConfig: SliderButtonCardConfig = {
  type: 'custom:slider-button-card',
  entity: 'light.bedroom'
};

const fanConfig: SliderButtonCardConfig = {
  type: 'custom:slider-button-card',
  entity: 'fan.living_room'
};

const coverConfig: SliderButtonCardConfig = {
  type: 'custom:slider-button-card',
  entity: 'cover.garage_door'
};

// Factory usage in card initialization
class SliderButtonCard extends LitElement {
  private ctrl: Controller;

  public setConfig(config: SliderButtonCardConfig): void {
    this._config = config;
    // Factory automatically instantiates the correct controller type
    this.ctrl = ControllerFactory.getInstance(config);
  }
}
```

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

### Configure Basic Slider Options (YAML)

Source: https://github.com/mattieha/slider-button-card/blob/main/README.md

Defines fundamental slider configurations including direction and background style. Supports gradient backgrounds.

```yaml
slider:
  direction: left-right
  background: gradient
```

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

### Create 4-Column Grid Layout with Multiple Slider Button Cards

Source: https://github.com/mattieha/slider-button-card/blob/main/README.md

Create a responsive 4-column grid layout showcasing multiple entity types (light, switch, fan, cover) using slider-button-cards with different slider directions, background styles, and action button configurations. Each card demonstrates unique slider properties including gradient, custom, triangle, and striped backgrounds.

```yaml
type: grid
cards:
  - type: custom:slider-button-card
    entity: light.couch
    slider:
      direction: left-right
      background: gradient
      use_state_color: true
    icon:
      tap_action:
        action: more-info
      use_state_color: true
    action_button:
      mode: toggle
  - type: custom:slider-button-card
    entity: switch.socket
    slider:
      direction: left-right
      background: custom
      toggle_on_click: true
    icon:
      use_state_color: true
      tap_action:
        action: more-info
    action_button:
      tap_action:
        action: toggle
      mode: toggle
    name: Switch
  - type: custom:slider-button-card
    entity: fan.living_fan
    slider:
      direction: left-right
      background: triangle
      show_track: true
    icon:
      tap_action:
        action: more-info
    action_button:
      tap_action:
        action: toggle
      mode: custom
    name: Fan
  - type: custom:slider-button-card
    entity: cover.living_cover
    slider:
      direction: top-bottom
      background: striped
    icon:
      show: true
      tap_action:
        action: more-info
    action_button:
      tap_action:
        action: toggle
      mode: custom
      icon: mdi:swap-vertical
    name: Cover
square: false
columns: 4
```

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

### Configure Visual Editor with Entity Change Handling in TypeScript

Source: https://context7.com/mattieha/slider-button-card/llms.txt

Shows how to implement a custom card editor extending LitElement that handles entity changes and automatically applies domain-specific default configurations. Includes editor tab structure for organizing configuration fields across general, icon, slider, and action button sections.

```typescript
import { SliderButtonCardEditor } from './editor';
import { SliderButtonCardConfig } from './types';

// Example: Programmatically set editor configuration
class CustomCardEditor extends LitElement {
  async setConfig(config: SliderButtonCardConfig): Promise<void> {
    this._config = config;
    await this.loadCardHelpers();
  }

  // Handle entity change with automatic defaults
  private _valueChangedEntity(ev): void {
    const value = ev.detail?.value;
    const updateDefaults = computeDomain(value) !== computeDomain(this._config?.entity);

    this._changeValue('entity', value);

    // Automatically apply domain-specific defaults
    if (updateDefaults) {
      const cfg = copy(this._config);
      applyPatch(cfg, ['slider'], getSliderDefaultForEntity(value));
      this._config = cfg;
      fireEvent(this, 'config-changed', { config: this._config });
    }
  }
}

// Example: Editor configuration structure
const editorConfig = {
  tabs: [
    {
      id: 'general',
      fields: ['entity', 'name', 'show_name', 'show_state', 'compact']
    },
    {
      id: 'icon',
      fields: ['icon', 'show', 'use_state_color', 'tap_action']
    },
    {
      id: 'slider',
      fields: ['direction', 'background', 'use_state_color', 'show_track', 'toggle_on_click', 'force_square']
    },
    {
      id: 'action_button',
      fields: ['mode', 'icon', 'show', 'show_spinner', 'tap_action']
    }
  ]
};
```

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

### Compact Mode Configuration

Source: https://github.com/mattieha/slider-button-card/blob/main/README.md

Enables a compact display mode for the slider-button-card. This is recommended for use in full-width layouts rather than grid layouts to ensure optimal presentation.

```yaml
compact: true
```

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

### Configure Media Player Volume and Play/Pause (YAML)

Source: https://github.com/mattieha/slider-button-card/blob/main/README.md

Default behavior for media players: slider controls volume. Uses entity picture if available. Action button toggles play/pause.

```yaml
type: custom:slider-button-card
entity: media_player.spotify_mha
slider:
  direction: left-right
  background: triangle
  show_track: true
icon:
  tap_action:
    action: more-info
action_button:
  mode: custom
  icon: mdi:play-pause
  tap_action:
    action: call-service
    service: media_player.media_play_pause
    service_data:
      entity_id: media_player.spotify_mha
name: Media
```

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

### Apply Configuration Patches and Retrieve Entity Defaults in TypeScript

Source: https://context7.com/mattieha/slider-button-card/llms.txt

Demonstrates using applyPatch to modify nested configuration objects and getSliderDefaultForEntity to retrieve domain-specific default settings. The utilities support flexible nested property updates and return appropriate defaults for different Home Assistant entity types like light, cover, and fan.

```typescript
import { applyPatch, getSliderDefaultForEntity, getEnumValues } from './utils';
import { SliderDirections, Domain } from './types';

// Example: Apply configuration patch to nested object
const config = {
  slider: {
    direction: 'left-right',
    background: 'solid'
  }
};

applyPatch(config, ['slider', 'background'], 'gradient');
// Result: config.slider.background = 'gradient'

applyPatch(config, ['icon', 'show'], true);
// Result: config.icon = { show: true }

// Example: Get default slider configuration for entity
const lightDefaults = getSliderDefaultForEntity('light.bedroom');
// Returns: { direction: 'left-right', background: 'gradient', use_state_color: true, ... }

const coverDefaults = getSliderDefaultForEntity('cover.garage');
// Returns: { direction: 'top-bottom', background: 'striped', invert: true, ... }

const fanDefaults = getSliderDefaultForEntity('fan.ceiling');
// Returns: { direction: 'left-right', background: 'solid', use_state_color: false, ... }

// Example: Get enum values for dropdowns
const directions = getEnumValues(SliderDirections);
// Returns: ['left-right', 'top-bottom', 'bottom-top']

const domains = getEnumValues(Domain);
// Returns: ['light', 'switch', 'fan', 'cover', 'input_boolean', 'media_player', 'climate', 'lock']
```

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

### Apply Custom Styles with Card-mod

Source: https://github.com/mattieha/slider-button-card/blob/main/README.md

Allows for custom styling of the slider-button-card using Card-mod. Define CSS variables to control various visual aspects like colors. No external dependencies are required beyond Card-mod.

```yaml
style: |
  :host {
    --VARIABLE: VALUE;
  }
```

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

### Define Complete Configuration Types in TypeScript

Source: https://context7.com/mattieha/slider-button-card/llms.txt

Provides TypeScript interface definitions for full, minimal, and custom action button configurations. Demonstrates type-safe configuration objects with proper enum values for slider directions, background styles, action button modes, and nested icon/slider/action button configurations.

```typescript
import {
  SliderButtonCardConfig,
  IconConfig,
  SliderConfig,
  ActionButtonConfig,
  ActionButtonMode,
  SliderDirections,
  SliderBackground,
  Domain
} from './types';

// Example: Complete configuration type usage
const fullConfig: SliderButtonCardConfig = {
  type: 'custom:slider-button-card',
  entity: 'light.bedroom',
  name: 'Bedroom Light',
  show_name: true,
  show_state: true,
  compact: false,
  theme: 'default',
  debug: false,
  icon: {
    icon: 'mdi:lightbulb',
    show: true,
    use_state_color: true,
    tap_action: {
      action: 'more-info'
    }
  },
  slider: {
    direction: SliderDirections.LEFT_RIGHT,
    background: SliderBackground.GRADIENT,
    use_state_color: true,
    use_percentage_bg_opacity: false,
    show_track: false,
    toggle_on_click: false,
    force_square: false,
    min: 0,
    max: 100,
    step: 5,
    attribute: 'brightness_pct',
    invert: false
  },
  action_button: {
    mode: ActionButtonMode.TOGGLE,
    icon: 'mdi:power',
    show: true,
    show_spinner: true,
    tap_action: {
      action: 'toggle'
    }
  }
};

// Example: Minimal configuration with type safety
const minimalConfig: SliderButtonCardConfig = {
  type: 'custom:slider-button-card',
  entity: 'light.living_room'
};

// Example: Custom action button configuration
const customActionConfig: ActionButtonConfig = {
  mode: ActionButtonMode.CUSTOM,
  icon: 'mdi:palette',
  show: true,
  show_spinner: false,
  tap_action: {
    action: 'call-service',
    service: 'scene.turn_on',
    service_data: {
      entity_id: 'scene.romantic'
    }
  }
};
```

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

### Enable State-Based Background Color (YAML)

Source: https://github.com/mattieha/slider-button-card/blob/main/README.md

Configures the slider to use the entity's state color for the background. This enhances visual feedback based on the entity's status.

```yaml
slider:
  direction: left-right
  background: gradient
  use_state_color: true
```

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

### Media Player with Volume Slider and Play/Pause Action

Source: https://context7.com/mattieha/slider-button-card/llms.txt

Demonstrates configuring the Slider Button Card for a media player, enabling volume control via a slider and providing a custom play/pause action button. The action button is configured to call a specific service.

```yaml
type: custom:slider-button-card
entity: media_player.spotify
name: Spotify
slider:
  direction: left-right
  background: triangle
  show_track: true
  use_state_color: false
icon:
  tap_action:
    action: more-info
action_button:
  mode: custom
  icon: mdi:play-pause
  show_spinner: true
  tap_action:
    action: call-service
    service: media_player.media_play_pause
    service_data:
      entity_id: media_player.spotify
```

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

### Configure Climate Target Temperature Control (YAML)

Source: https://github.com/mattieha/slider-button-card/blob/main/README.md

Default behavior for climate entities: slider adjusts target temperature without altering the entity's state directly. Icon and action button are configured for standard interactions.

```yaml
type: custom:slider-button-card
entity: climate.harmony_climate_controller
slider:
  direction: left-right
  background: triangle
  show_track: true
icon:
  tap_action:
    action: more-info
action_button:
  mode: custom
  tap_action:
    action: toggle
name: Airco
```

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

### Basic Light Entity Configuration with Gradient Slider

Source: https://context7.com/mattieha/slider-button-card/llms.txt

Configures the Slider Button Card for a light entity, featuring a gradient background and brightness control. It includes options for showing entity name and state, compact mode, and custom icon tap actions.

```yaml
type: custom:slider-button-card
entity: light.living_room
name: Living Room Light
show_name: true
show_state: true
compact: false
slider:
  direction: left-right
  background: gradient
  use_state_color: true
  use_percentage_bg_opacity: false
  show_track: false
  toggle_on_click: false
  force_square: false
icon:
  show: true
  use_state_color: true
  tap_action:
    action: more-info
action_button:
  mode: toggle
  show: true
  show_spinner: true
```

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

### Percentage and Value Conversion Utilities

Source: https://context7.com/mattieha/slider-button-card/llms.txt

Offers utility functions for converting values between percentages and absolute numerical ranges, and for normalizing values to stay within specified bounds. These are crucial for slider calculations and state management.

```typescript
import { toPercentage, percentageToValue, normalize } from './utils';

// Example: Convert slider position to percentage
const sliderMin = 0;
const sliderMax = 100;
const currentValue = 75;

const percentage = toPercentage(currentValue, sliderMin, sliderMax);
// Returns: 75

// Example: Convert percentage to absolute value
const percent = 50;
const min = 153; // Light color temp min
const max = 500; // Light color temp max

const absoluteValue = percentageToValue(percent, min, max);
// Returns: 326 (middle value)

// Example: Normalize value to stay within bounds
const outOfBoundsValue = 150;
const normalizedValue = normalize(outOfBoundsValue, 0, 100);
// Returns: 100 (clamped to max)

const negativeValue = -20;
const normalizedNegative = normalize(negativeValue, 0, 100);
// Returns: 0 (clamped to min)
```

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

### Display Slider Track (YAML)

Source: https://github.com/mattieha/slider-button-card/blob/main/README.md

Enables the display of the slider track, which is particularly useful for full-width or triangle-shaped sliders to provide a clear visual range.

```yaml
slider:
  direction: left-right
  background: triangle
  use_state_color: true
  show_track: true
```

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

### Configure Switch with Toggle on Click (YAML)

Source: https://github.com/mattieha/slider-button-card/blob/main/README.md

Configures a switch entity where the slider acts as a toggle when clicked (`toggle_on_click: true`), disabling the sliding functionality. The icon uses state color.

```yaml
type: custom:slider-button-card
entity: switch.socket
slider:
  direction: left-right
  background: custom
  toggle_on_click: true
icon:
  use_state_color: true
  tap_action:
    action: more-info
action_button:
  tap_action:
    action: toggle
  mode: custom
name: Switch
```

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

### Configure Lock Entity with Slider Button Card

Source: https://github.com/mattieha/slider-button-card/blob/main/README.md

Configure a lock entity using the slider-button-card with left-right slider direction, solid background, and click-to-toggle functionality. The action button is hidden and the icon displays state-based colors with a more-info tap action.

```yaml
type: custom:slider-button-card
entity: lock.virtual_lock
slider:
  direction: left-right
  background: solid
  toggle_on_click: true
icon:
  use_state_color: true
  tap_action:
    action: more-info
action_button:
  show: false
name: Lock
```

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

### Calculate Light RGB Color from Temperature (Mireds)

Source: https://context7.com/mattieha/slider-button-card/llms.txt

Provides a utility function to calculate the RGB color value based on a light's color temperature in mireds. This allows for realistic color rendering by mapping temperature to appropriate RGB values within a specified range.

```typescript
import { getLightColorBasedOnTemperature } from './utils';

// Example: Calculate color for warm white (400 mireds)
const currentTemp = 400;
const minMireds = 153; // Cool white
const maxMireds = 500; // Warm white

const rgbColor = getLightColorBasedOnTemperature(currentTemp, minMireds, maxMireds);
// Returns: "rgb(255, 200, 120)" (warm orange-ish color)

// Example: Calculate color for cool white (200 mireds)
const coolColor = getLightColorBasedOnTemperature(200, 153, 500);
// Returns: "rgb(180, 210, 255)" (cool blue-ish color)

// Example: Calculate color for neutral white (326 mireds - middle)
const neutralColor = getLightColorBasedOnTemperature(326, 153, 500);
// Returns: "rgb(255, 255, 255)" (white)
```

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

### Force Square Aspect Ratio (YAML)

Source: https://github.com/mattieha/slider-button-card/blob/main/README.md

Forces the slider to maintain a square aspect ratio, irrespective of its container. This ensures a consistent visual appearance.

```yaml
slider:
  direction: left-right
  background: triangle
  use_state_color: true
  show_track: true
  force_square: true
```

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

### Lock Entity with Solid Background and Toggle Behavior

Source: https://context7.com/mattieha/slider-button-card/llms.txt

Configuration for a lock entity using the Slider Button Card, set to toggle behavior with a solid background. The action button is hidden in this configuration.

```yaml
type: custom:slider-button-card
entity: lock.front_door
name: Front Door Lock
slider:
  direction: left-right
  background: solid
  toggle_on_click: true
  use_state_color: false
icon:
  use_state_color: true
  tap_action:
    action: more-info
action_button:
  show: false
```

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

### Fan Entity with Triangle Background and Custom Action

Source: https://context7.com/mattieha/slider-button-card/llms.txt

Sets up the Slider Button Card for a fan entity with a triangle background and a custom action button. This configuration supports a rotating icon animation and allows for a specific tap action on the action button.

```yaml
type: custom:slider-button-card
entity: fan.bedroom_fan
name: Bedroom Fan
slider:
  direction: left-right
  background: triangle
  show_track: true
  use_state_color: false
icon:
  use_state_color: true
  tap_action:
    action: more-info
action_button:
  mode: custom
  show: true
  show_spinner: true
  tap_action:
    action: toggle
```

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

### Cover Entity with Vertical Striped Slider

Source: https://context7.com/mattieha/slider-button-card/llms.txt

Configures the Slider Button Card for a cover entity, utilizing a vertical slider with a striped background for intuitive position control. It includes options to invert the slider and customize the icon and action button.

```yaml
type: custom:slider-button-card
entity: cover.living_room_blinds
name: Living Room Blinds
slider:
  direction: top-bottom
  background: striped
  invert: true
  show_track: false
icon:
  show: true
  tap_action:
    action: more-info
action_button:
  mode: custom
  icon: mdi:swap-vertical
  tap_action:
    action: toggle
```

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

### Add Translation to localize.ts (TypeScript)

Source: https://github.com/mattieha/slider-button-card/blob/main/CONTRIBUTE.md

This snippet demonstrates how to add a new language translation to the localization file. It involves importing the new language JSON and adding it to the languages object. Ensure the import statement is correct and the new language is added alphabetically.

```typescript
import * as xx from './languages/xx.json';

const languages: any = {
  en: en,
  he: he,
  nl: nl,
  pl: pl,
  ru: ru,
  xx: xx, // Add alphabeticly (without this comment)
};
```

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