Slider thumb pictures blurry

I also have experienced this issue in numerous course developments. Since flash is no longer supported, and HTML5 is the only option for most of us, it would be nice to see a fix here. Especially since this issue is now going on 3 years old.

I just wanted to share what worked for me. I noticed that the slider thumb (with custom png graphic) looks sharp when the mouse hovers over it. If this is the case for you, then try duplicating the hover state, and name it Selected (or any of the SL built-in states). Then add a trigger to change the state of the slider to Selected when the timeline starts.

Correction: I realize that you actually need to create a Visited state, NOT Selected state. It doesn't really work with a Selected state, because every time the user interacts with the slider, the thumb graphic toggles back and forth between the Selected (sharp) state and the Normal (blurry) state. With the Visited state, the image stays sharp.

Hi Rob,

Looks like JPEG compression to me. Maybe you can push Picture Quality slider to the max when you publish and check if it makes a difference.

Thanks for the suggestion. I tried that, but it didn't make a difference.

Since the picture works fine when not used as a slider thumb, I'm fairly certain this is a bug. Storyline seems to be resizing the picture down to the default thumb size and then enlarging it again from the tiny version. This prevents using large thumbs, which greatly cripples the usefulness of the feature. 

I'm hoping that someone has found a workaround.  For instance, is there an alternative way (other than a slider) to constrain the path of a user-dragged object ?

I do get a slight difference when publishing, expecially with Flash (less artefacts in red disk). See attached file.

You're right about the difference between pic and cursor : in the HTML 5 folder, you can see cursor is published as JPEG while picture remains as a crisp PNG.

(cursor on the left)

Hi Rob,

I'd love to take a look at this. Can you share the original image you're inserting and a copy of your .story file with me? If you need to send privately you can share directly with our Support Engineers here. 

I created a generic story for this. I'm exporting as HTML5 using Chrome on Windows.

The first image is what the thumb looks like at the default height of the slider.

The second image shows the slider height and thumb enlarged to the actual pixel size of the image.

The third image is inserted as a picture at 100% size. This version looks fine. 

Thanks Rob for sharing that example. I see what you're describing when previewing (as that shows the HTML5 output) and once I published and uploaded a copy to Tempshare here. 

It appears in the HTML5 output in Chrome and Edge, although the Flash output doesn't cause the same blurriness. We've seen some blurriness appear in Chrome HTML5 based on how Chrome is rendering it - but since it's also visible in a few other set ups, I'm going to share this with my team as a possible software bug. 

From here, I’ll meet with my team to take a closer look so we can determine next steps. Sometimes my team catches errors in my logic and we don’t have a bug after all. Of course, if that’s the case, I’ll let you know! 

Depending on priority and risk, some bugs can be fixed quickly, while others take longer to resolve. Here's more information on how we identify and tackle bugs.

I’ll let you know as soon as we have an update on this issue. 

Thanks for taking a look at this. The results are the same in Firefox. So I don't think it's related to a specific browser. However, it does seem to be a bit worse when viewed after publishing as opposed to previewing. Or maybe it's just my imagination from staring at it too long. 

Hi Rob,

It looked about the same publish vs. preview - but I only saw it in the HTML5 output (which explains why it appeared that way in preview too). 

In the meantime, can you look at using the Flash output?