Filling knob with gradient

[Viacheslav96]

First Check

• I added a very descriptive title here.
• I have checked the FAQs for a similar question and didn't find it.
• I used the GitHub search to find a similar question and didn't find it.
• I searched the NiceGUI documentation, with the integrated search.
• I already searched online "How to X in NiceGUI" and didn't find any information.

Example Code

from nicegui import ui

ui.add_body_html('''
        <svg width="0" height="0" style="position: absolute; pointer-events: none;">
        <defs>
            <linearGradient id="knobGradient" x1="100%" y1="100%" x2="0%" y2="0%">
            <stop offset="0%" stop-color="#ea2015" />
            <stop offset="100%" stop-color="#41be69" />
            </linearGradient>
        </defs>
        </svg>
        ''')

# Insert CSS that forcefully overrides possible default styles
ui.add_head_html('''
<style>
/* Target possible SVG / path elements inside the knob */
.gradient-knob svg path,
.gradient-knob svg circle,
.gradient-knob svg g,
.gradient-knob .q-knob__track,
.gradient-knob .q-knob__fill {
    stroke: url(#knobGradient) !important;
    fill: none !important; /* in case fill is used */
}
.gradient-knob .q-knob__inner {
    fill: transparent !important;
}
</style>
''')

ui.label("Gradient Knob (NiceGUI 3.0.3)").classes("text-xl font-bold")

ui.knob(min=0, max=100, value=50, show_value=True).classes(
    'gradient-knob').props('size=200px')

ui.run()

Description

I want to create a knob control that will be filled with gradient colouring. But doing it in a way that I did, I can no longer set the colour of the track itself. Is there a better way to do it? Also, if I go to 100 on the knob, the gradient starts to go back to red. If anyone knows how to fix it, I'll appreciate it

NiceGUI Version

3.0.3

Python Version

Python 3.12.3

Browser

Chrome

Operating System

Linux

Additional Context

No response

[falkoschindler]

Hi @Viacheslav96,

The correct selector seems to be ".q-circular-progress__circle":

ui.add_body_html('''
    <svg style="position: absolute">
        <defs>
            <linearGradient id="knobGradient" x1="100%" y1="100%" x2="0%" y2="0%">
                <stop offset="0%" stop-color="#ea2015" />
                <stop offset="100%" stop-color="#41be69" />
            </linearGradient>
        </defs>
    </svg>
''')

ui.add_css('''
    .q-circular-progress__circle {
        stroke: url(#knobGradient) !important;
    }
''')

ui.knob(value=0.5, show_value=True, track_color='grey-4', size='16rem').classes('gradient-knob')

But you probably want a conic gradient instead of a linear one. Unfortunately there seems to be no such gradient in SVG and we need to find some CSS hack to work around this limitation.

[Viacheslav96]

Based on what I can find, people usually apply a mask or clip of some sort to pure SVG. Is that an option for ui.knob?

[falkoschindler]

I think so, yes. But I'm struggling to find a solution. 🫤