Option select slider

[dj3030]

Option Slider

Version: v5.3.1
Creator: Andreas

Important

Supported cards:

• Button
• Custom Button
• Cover
• Sub Buttons
• Select
• Calendar
• Climate
• Media Player
• Separator

Segmented slider – pill indicator positioned with CSS percentage, no DOM measurement. Sub button index is 1-based. Default active color follows the neon module (--bc-icon-bg) with fallback to HA accent color.
Configure this module via the editor or in YAML, for example:

option_slider: 
    active_color: YOUR_VALUE

---

🧩 Get this Module

To use this module, simply install it from the Module Store (from the editor of any card > Modules), or copy and paste the following configuration into a /www/bubble/modules/option_slider.yaml file.

option_slider:
    name: "Option Slider"
    version: "v5.3.1"
    creator: "Andreas"
    link: "https://github.com/Clooos/Bubble-Card/discussions/2388"

    supported:
        - button
        - cover
        - sub-buttons
        - select
        - calendar
        - climate
        - media-player
        - separator

    description: |
        Segmented slider – pill indicator positioned with CSS percentage, no DOM measurement. Sub button index is 1-based. Default active color follows the neon module (--bc-icon-bg) with fallback to HA accent color.
        <br><br>
        <code-block><pre>
        option_slider: 
            active_color: YOUR_VALUE
        </pre></code-block>

    code: |
        ${(() => {
          const cfg = this.config.option_slider || {};
          if (!cfg.sliders && cfg.sub_button_index === undefined) return '';
          if (card.closest('hui-card-preview') || card.closest('.card-editor')) return '';
        
          if (!card._osRuntime) card._osRuntime = { initialized: {}, lastStates: {} };
          var rt = card._osRuntime;
          rt.hass = hass;
        
          var sliderCfgs = cfg.sliders && cfg.sliders.length
            ? cfg.sliders
            : [{ sub_button_index: cfg.sub_button_index, entity: cfg.entity,
                 active_color: cfg.active_color, active_text_color: cfg.active_text_color }];
        
          var subButtonConfigs = this.config.sub_button || [];
        
          function getEntity(sc) {
            if (sc.entity) return sc.entity;
            var arrayIdx = (sc.sub_button_index || 1) - 1;
            var sub = Array.isArray(subButtonConfigs) ? subButtonConfigs[arrayIdx] : null;
            return sub && sub.entity ? sub.entity : (cfg.entity || this.config.entity);
          }
        
          function resolveColor(color) {
            if (!color) return color;
            if (!color.startsWith('var(')) return color; // non-var colors need no DOM resolution
            var probe = document.createElement('div');
            probe.style.cssText = 'position:fixed;opacity:0;pointer-events:none;color:' + color;
            card.appendChild(probe); // must be card (not body) so card-scoped vars like --bc-icon-bg resolve
            var resolved = window.getComputedStyle(probe).color;
            probe.remove();
            return (resolved && resolved !== 'rgba(0, 0, 0, 0)') ? resolved : color;
          }
        
          function pillPct(idx, total) {
            var w = 100 / total;
            return { left: (idx * w) + '%', width: w + '%' };
          }
        
          function setSlider(sliderEl, idx, total, noTransition) {
            var p = pillPct(idx, total);
            if (noTransition) sliderEl.style.transition = 'none';
            sliderEl.style.left  = p.left;
            sliderEl.style.width = p.width;
            if (noTransition) {
              requestAnimationFrame(function() {
                requestAnimationFrame(function() {
                  sliderEl.style.transition = 'left 0.28s cubic-bezier(0.4,0,0.2,1), width 0.28s cubic-bezier(0.4,0,0.2,1)';
                });
              });
            }
          }
        
          function buildSlider(subBtn, sc, entityId) {
            var key = 'slider_' + (sc.sub_button_index || 1);
            var liveHass = rt.hass || hass;
            var stateObj = liveHass.states[entityId];
            if (!stateObj) return;
        
            var current   = stateObj.state;
            var options   = stateObj.attributes.options || [];
            var activeIdx = options.indexOf(current);
            var total     = options.length;
        
            var activeText   = sc.active_text_color || cfg.active_text_color || '#ffffff';
            var inactiveText = 'rgba(255,255,255,0.5)';
        
            // Hide original sub-button content
            subBtn.querySelectorAll('.bubble-sub-button-icon,.bubble-sub-button-name,.bubble-sub-button-state,ha-icon,span').forEach(function(el) {
              el.style.visibility = 'hidden';
            });
            subBtn.style.pointerEvents = 'none';
        
            // Disable Bubble Card bounce animation on the sub-button
            var styleId = 'os-style-' + (sc.sub_button_index || 1);
            if (!document.getElementById(styleId)) {
              var st = document.createElement('style');
              st.id = styleId;
              var cls = '.bubble-sub-button-' + (sc.sub_button_index || 1);
              st.textContent = cls + '{animation:none!important;transform:none!important;transition:none!important;}';
              document.head.appendChild(st);
            }
        
            // Track already built – only update state.
            // resolveColor (card.appendChild) must NOT run here as it disrupts the CSS transition.
            var track = subBtn.querySelector('.os-track');
            if (track) {
              if (rt.lastStates[key] === current) return;
              rt.lastStates[key] = current;
              var sliderEl = track.querySelector('.os-slider');
              track.querySelectorAll('.os-btn').forEach(function(btn) {
                var isActive = btn.dataset.opt === current;
                btn.style.color = isActive ? activeText : inactiveText;
              });
              if (sliderEl) setSlider(sliderEl, activeIdx >= 0 ? activeIdx : 0, total, false);
              return;
            }
        
            // Resolve color only once – when the track is first built.
            // Uses card.appendChild so card-scoped vars (--bc-icon-bg from neon module) are visible.
            var activeColor = resolveColor(
              sc.active_color || cfg.active_color ||
              'var(--bc-icon-bg, var(--accent-color))'
            ) || resolveColor('var(--accent-color)') || '#f5a623';
        
            rt.lastStates[key] = current;
        
            // Build track
            track = document.createElement('div');
            track.className = 'os-track';
            var computedRadius = window.getComputedStyle(subBtn).borderRadius || 'inherit';
            track.style.cssText = [
              'position:absolute', 'inset:0',
              'display:flex', 'align-items:stretch',
              'padding:0',
              'border-radius:' + computedRadius,
              'overflow:hidden',
              'pointer-events:auto',
              'z-index:10',
            ].join(';');
        
            // Slider indicator
            var sliderEl = document.createElement('div');
            sliderEl.className = 'os-slider';
            sliderEl.style.cssText = [
              'position:absolute', 'top:0', 'bottom:0',
              'border-radius:' + computedRadius,
              'z-index:1',
              'pointer-events:none',
              'transition:none',
              'background:' + activeColor,
              'left:' + pillPct(activeIdx >= 0 ? activeIdx : 0, total).left,
              'width:' + pillPct(activeIdx >= 0 ? activeIdx : 0, total).width,
            ].join(';');
            track.appendChild(sliderEl);
        
            // Option buttons – full height so entire cell area is clickable
            options.forEach(function(opt) {
              var btn = document.createElement('div');
              btn.className = 'os-btn';
              btn.dataset.opt = opt;
              btn.textContent = opt;
              var isActive = opt === current;
              btn.style.cssText = [
                'flex:1',
                'display:flex', 'align-items:center', 'justify-content:center',
                'padding:0 4px',
                'font-size:12px', 'font-weight:600',
                'cursor:pointer', 'position:relative', 'z-index:2',
                'white-space:nowrap', 'overflow:hidden', 'text-overflow:ellipsis',
                'user-select:none', '-webkit-user-select:none',
                'color:' + (isActive ? activeText : inactiveText),
              ].join(';');
              btn.addEventListener('click', function(e) {
                e.stopImmediatePropagation();
                var lh = rt.hass || hass;
                lh.callService('input_select', 'select_option', { entity_id: entityId, option: opt });
              });
              track.appendChild(btn);
            });
        
            subBtn.style.position = 'relative';
            subBtn.appendChild(track);
        
            // Enable transition after first render
            requestAnimationFrame(function() {
              requestAnimationFrame(function() {
                sliderEl.style.transition = 'left 0.28s cubic-bezier(0.4,0,0.2,1), width 0.28s cubic-bezier(0.4,0,0.2,1)';
              });
            });
          }
        
          function waitForSubBtn(sc) {
            var subIdx   = sc.sub_button_index !== undefined ? sc.sub_button_index : 1;
            var entityId = getEntity.call(this, sc);
            var key      = 'slider_' + subIdx;
        
            var subBtn = card.querySelector('.bubble-sub-button-' + subIdx) ||
                         card.querySelectorAll('.bubble-sub-button')[subIdx - 1];
        
            if (subBtn) {
              buildSlider(subBtn, sc, entityId);
        
              if (!rt['io_' + key]) {
                rt['io_' + key] = new IntersectionObserver(function(entries) {
                  if (!entries[0].isIntersecting) return;
                  var lh = rt.hass || hass;
                  var s  = lh.states[entityId];
                  if (!s) return;
                  var cur      = s.state;
                  var opts     = s.attributes.options || [];
                  var idx      = opts.indexOf(cur);
                  var track    = subBtn.querySelector('.os-track');
                  if (!track) return;
                  rt.lastStates[key] = null;
                  var sliderEl = track.querySelector('.os-slider');
                  track.querySelectorAll('.os-btn').forEach(function(b) {
                    var isAct = b.dataset.opt === cur;
                    b.style.color = isAct
                      ? (sc.active_text_color || cfg.active_text_color || '#ffffff')
                      : 'rgba(255,255,255,0.5)';
                  });
                  if (sliderEl) setSlider(sliderEl, idx >= 0 ? idx : 0, opts.length, true);
                }, { threshold: 0.1 });
                rt['io_' + key].observe(card);
              }
            } else {
              if (rt['mo_' + key]) return;
              rt['mo_' + key] = new MutationObserver(function(mutations, obs) {
                var found = card.querySelector('.bubble-sub-button-' + subIdx) ||
                            card.querySelectorAll('.bubble-sub-button')[subIdx - 1];
                if (found) {
                  obs.disconnect();
                  rt['mo_' + key] = null;
                  buildSlider(found, sc, entityId);
                }
              });
              rt['mo_' + key].observe(card, { childList: true, subtree: true });
            }
          }
        
          sliderCfgs.forEach(function(sc) { waitForSubBtn.call(this, sc); }.bind(this));
          return '';
        })()}
        

    editor:
      - label: Global active color (slider)
        name: active_color
        selector:
          text: {}
      - label: Global active text color
        name: active_text_color
        selector:
          text: {}
      - name: sliders
        label: Sliders
        selector:
          object:
            multiple: true
            fields:
              entity:
                label: Entity
                selector:
                  entity:
                    filter:
                      domain:
                        - input_select
                        - select
              sub_button_index:
                label: Sub Button Index (1 = first)
                selector:
                  number:
                    min: 1
                    max: 10
                    step: 1
                    mode: box
              active_color:
                label: Active color (slider)
                selector:
                  text: {}
              active_text_color:
                label: Active text color
                selector:
                  text: {}
      

---

Screenshot:

Before posting your module

• I've replaced all lines starting with ->
• I've updated the unsupported cards above the description and under the unsupported property
• I've added a screenshot
• I've chosen a unique your_module_key
• I really enjoyed working on this module ❤️