Customizing Your Seekbar in Articulate Storyline: A Step-by-Step Guide

Ever felt like your Storyline seekbar is a bit… meh? You know, functional but not exactly setting the world on fire?

Seekbars are a great way to add interactivity and visual appeal to your e-learning courses. With Storyline’s built-in seekbar functionality, you can easily track progress and allow learners to navigate through your content. But what if you want to go beyond the basic seekbar and customize it to match your course branding and design?

Let’s walk you through the steps to customize your seekbar using the provided Storyline file and JavaScript code.

Steps to Customize Your Seekbar

Copy the JavaScript Function:

- Open the provided Storyline file.
- Locate the JavaScript trigger function associated with your master slide or the specific slide containing the seekbar.
- Copy the entire styleSeekbar() function.

Tweak it to Your Heart’s Content:

This is where the fun begins! Inside the styleSeekbar() function, you’ll find a bunch of settings you can play with. Think of it as your seekbar’s control panel:

styleSeekbar({
  seekbarColor: 'purple',
  seekbarHeight: '10px',
  fillColor: '#d429ff',
  fillGradient: 'linear-gradient(90deg, rgba(54,139,255,1) 0%, rgba(153,28,28,1) 14%, rgba(131,147,23,1) 50%, rgba(164,54,65,1) 68%, rgba(255,241,196,1) 100%)',
  knobColor: '#2ec4b6',
  knobSize: '45px',
  knobShape: 'customShape',
  //knobStrokeColor: '#ffffff',
  //knobStrokeWidth: '3px',
  persistentKnob: true,
  accText: 'Custom Knob Shape' // Replace with the actual accessibility text for your custom shape
});

You can experiment with different colors, sizes, and shapes.
If you don’t want to use a particular parameter, simply comment it out by adding // at the beginning of the line.
Under knobShape, choose one of the shapes made just for you, or make your own under customShape,
Place an SVG on your stage and find the data-model-id and put that in the ModelId field above.

Unleash Your Inner Artist: Custom Shapes

Want to take your seekbar to the next level? Let’s create a custom knob shape using icons from FontAwesome or Google Fonts.

Find Your Icon: Head over to FontAwesome or Google Fonts-Icons and find the perfect icon to represent your seekbar knob.
Grab the SVG: Download it, bring it into your course on the master slide top slide, and give it accessibility text of Custom Knob Shape.

The Code:

    function styleSeekbar(options = {}) {
  console.log('Styling seekbar with options:', options);

  const {
    seekbarColor,
    seekbarHeight,
    fillColor,
    fillGradient,
    knobColor,
    knobSize,
    knobBorderColor,
    knobBorderWidth,
    knobShape,
    persistentKnob,
    accText,
    knobStrokeColor,
    knobStrokeWidth
  } = options;

  let imageURL = null;

  // If customShape is used and accText is provided, find the image
  if (knobShape === 'customShape' && accText) {
    const container = document.querySelector(`[data-acc-text="${accText}"]`);

    if (!container) {
      console.error(`Element with data-acc-text '${accText}' not found.`);
      return;
    }

    const useElement = container.querySelector('svg use');
    if (useElement) {
      const useHref = useElement.getAttribute('href');
      const symbol = document.querySelector(useHref);
      if (symbol) {
        const svgString = new XMLSerializer().serializeToString(symbol);
        imageURL = `data:image/svg+xml,${encodeURIComponent(svgString)}`;
      } else {
        console.error(`Symbol with ID ${useHref} not found.`);
        return;
      }
    }

    const imageElement = container.querySelector('svg image');
    if (imageElement) {
      imageURL = imageElement.getAttribute('xlink:href');
    }

    console.log('Custom shape image URL:', imageURL);
  }

  // Select elements using their data-ref attributes
  const seekbar = document.querySelector('[data-ref="seek"]');
  const fill = document.querySelector('[data-ref="progressBarFill"]');

  // Select the parent elements of the knob
  const knobParents = document.querySelectorAll('#bottom-bar .progress-bar-fill, #floating-seek .progress-bar-fill');

  console.log('Elements found:', {
    seekbar: !!seekbar,
    fill: !!fill,
    knobParents: knobParents.length
  });

  // Create a style element for custom styles
  const style = document.createElement('style');
  document.head.appendChild(style);

  // Seekbar styles
  if (seekbar && (seekbarColor || seekbarHeight)) {
    if (seekbarColor) {
      seekbar.style.setProperty('background-color', seekbarColor, 'important');
      console.log('Applied seekbar color:', seekbarColor);
    }
    if (seekbarHeight) {
      seekbar.style.setProperty('height', seekbarHeight, 'important');
      console.log('Applied seekbar height:', seekbarHeight);
    }
  }

  // Fill styles
  if (fill) {
    if (fillGradient) {
      fill.style.setProperty('background-image', fillGradient, 'important');
      fill.style.setProperty('background-color', 'transparent', 'important');
      console.log('Applied fill gradient:', fillGradient);
    } else if (fillColor) {
      fill.style.setProperty('background-color', fillColor, 'important');
      fill.style.setProperty('background-image', 'none', 'important');
      console.log('Applied fill color:', fillColor);
    }
  }

  // Define knob shapes
  const knobShapes = {
    circle: `
      border-radius: 50% !important;
    `,
    square: `
      border-radius: 0 !important;
    `,
    rounded: `
      border-radius: 20% !important;
    `,
    diamond: `
      transform: rotate(45deg) !important;
      border-radius: 4px !important;
    `,
    customShape: imageURL ? `
    -webkit-mask-image: url("${imageURL}") !important;
    mask-image: url("${imageURL}") !important;
    -webkit-mask-size: 80% 80% !important;
    mask-size: 80% 80% !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    background-size: 80% 80% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  ` : ''
  };

  // Note: Custom shapes do not support strokes
  const strokeStyle = knobShape !== 'customShape' && knobStrokeColor
    ? `box-shadow: 0 0 0 ${knobStrokeWidth || '2px'} ${knobStrokeColor} !important;`
    : '';

  // Apply styles
  let knobStyle = `
  #bottom-bar .progress-bar-fill::after,
  #floating-seek .progress-bar-fill::after {
    content: "" !important;
    position: absolute !important;
    opacity: ${persistentKnob ? '1' : '0'};
    visibility: visible !important;
    display: block !important;
    transition: opacity 0.2s ease !important;
    background-color: ${knobColor || 'red'} !important;
    width: ${knobSize || '20px'} !important;
    height: ${knobSize || '20px'} !important;
    ${knobBorderColor ? `border-color: ${knobBorderColor} !important;` : ''}
    ${knobBorderWidth ? `border-width: ${knobBorderWidth} !important; border-style: solid !important;` : ''}
    ${knobShapes[knobShape] || knobShapes['circle']}
    ${strokeStyle}
    pointer-events: auto !important;
    z-index: 1000 !important;
    top: 50% !important;
    right: 0 !important;
    transform: translate(-50%, -50%) ${knobShape === 'diamond' ? 'rotate(45deg)' : ''} !important;
    box-sizing: content-box !important;
  }
  #bottom-bar .progress-bar-fill,
  #floating-seek .progress-bar-fill {
    position: relative !important;
  }
  ${!persistentKnob ? `
    #bottom-bar .progress-bar:hover .progress-bar-fill::after,
    #floating-seek .progress-bar:hover .progress-bar-fill::after {
      opacity: 1 !important;
    }
  ` : ''}
`;

  // Update the style element's content
  style.textContent = knobStyle;
  console.log('Applied knob styles:', knobStyle);

  console.log('Styling complete');
}

// Example usage with stroke and custom shape
styleSeekbar({
  seekbarColor: 'purple',
  seekbarHeight: '10px',
  fillColor: '#d429ff',
  fillGradient: 'linear-gradient(90deg, rgba(54,139,255,1) 0%, rgba(153,28,28,1) 14%, rgba(131,147,23,1) 50%, rgba(164,54,65,1) 68%, rgba(255,241,196,1) 100%)',
  knobColor: '#2ec4b6',
  knobSize: '45px',
  knobShape: 'customShape',
  //knobStrokeColor: '#ffffff',
  //knobStrokeWidth: '3px',
  persistentKnob: true,
  accText: 'Custom Knob Shape' // Replace with the actual accessibility text for your custom shape
});

// Debug: Log all elements with class 'progress-bar-fill'
console.log('All progress-bar-fill elements:', document.querySelectorAll('.progress-bar-fill'));

Show Off Your Skills

Test it Out: Make sure your fancy new seekbar looks good on all devices.
Share Your Masterpiece: Post a screenshot of your styled seekbar on social media and tag me! We’d love to see your creations.

Remember:

Have fun and be creative! There are endless possibilities for customization.
The provided code is just a starting point. Feel free to explore and add your own flair.

Please watch this video.

Customizing Your Seekbar in Articulate Storyline: A Step-by-Step Guide

Steps to Customize Your Seekbar

Copy the JavaScript Function:

Tweak it to Your Heart’s Content:

Unleash Your Inner Artist: Custom Shapes

Unleash Your Inner Artist: Custom Shapes

The Code:

Show Off Your Skills

Remember:

Creating Dynamic Text Animations in Storyline: A Complete Guide

Blast Off with Articulate Storyline: Creating an 8-Bit Space Adventure

Transforming Storyline Navigation: From Rectangular to Pill-Shaped Buttons with JavaScript