Use Html content<input type=radio> visual to build a slicer, how to get slicer function。

[Andrew_lu1933]

In power bi desktop,  we can't setting the input radio color, I want to use html <input type=radio> and css to get custom style.

it display the custom select element, but how can get the slicer function.

Month = 
AddColumns(
    values('Date'[Month]),
    "Html_month",
    var month_r = Format([Month],"Mmm-yy")
    var before_str = "<label><input type='radio' name='month'><span>"
    var after_str = "</span></label>"
    return before_str & month_r & after_str
)
css_month = "<style>
            * {
                padding: 0;
                margin: 0;
                box-sizing: border-box;
            }

            label {
                position: relative;
                height: 30px;
                line-height: 30px;
                padding-left: 10px;
            }
            label>span{
                margin-left: 12px;color:#FFEFD5;
            }

            input[type=radio] {
                visibility: hidden;
                height: 30px;
                margin-left: .2rem;

            }

            input[type=radio]:checked::before {
                background: #2957FF;
                visibility: visible;
            }

            input[type=radio]::before {
                content: '';
                position: absolute;
                margin-top: 15px;
                margin-left: 2px;
                height: 16px;
                width: 16px;
                border-radius: 50%;
                background-color: rgba(152,251,152,0.2);
                visibility: visible;
                z-index: 2;
            }

            input[type=radio]::after {
                content: '';
                position: absolute;
                height: 20px;
                width: 20px;
                margin-top: 13px;
                border-radius: 50%;
                background-color: transparent;
                border: 2px solid #FFF8DC;
                visibility: visible;
                z-index: -1;
            }
        </style>"

[dm-p]

Hi @Andrew_lu1933,

HTML Content does not support JavaScript, or include any of the JavaScript APIs necessary for building custom visuals using the TypeScript SDK.

If you're looking to build a functional slicer, please refer to the documentation for developing a custom visual here. Once you are familiar with the concepts required, you can look at setting up and using the filter API to ensure that your visual works as a slicer.

Regards,

Daniel

[KerKol]

Frequently Asked Questions | HTML Content - Custom Visual for Power BI (html-content.com)