I want to hide the process bar when there is no value in either From/To.

[tkmry]

When either From/To has a no value in it, the progress bar appears in a strange position.

To avoid such cases, I personally hide the internal text in the css so that the progress bar does not show up in relation to the width when it is an invalid range.

However, when I displayed it on a scale that I don't normally use, it seemed to be displaying incorrectly, so I will present the problem and solution.

The samples is below.

• Now. https://jsfiddle.net/63gefc4s/8/
• The ideal I think. https://jsfiddle.net/qyus4dn2/5/

Translated with www.DeepL.com/Translator (free version)

---

From/Toのいずれも値が入っていない時、プログレスバーが変な位置に表示されます。
こういうケースに陥らないように、個人的にはcssで内部のテキストを非表示にすることで、無効な範囲だった場合にwidthとの関係でプログレスバーが表示させていません。
しかし普段使っていないスケールで表示した際に、表示がおかしくなっているようだったので、問題と解決策を提示します。

[tkmry]

Since my recent post, I've been wondering what this process should be, and I've begun to think that this kind of variation might be a good idea.

• The other ideal: https://jsfiddle.net/3wfn8xst/12/

The implementation would be as follows.

• If From/To is set, display as usual
• If From isn't set, display from left end to To
• If To isn't set, display from From to the right end
• if neither From/To is set, Not displayed.