<jupyter_start><jupyter_text>Components<jupyter_code>class MaterialTextField(MaterialBase):
    
    value = param.String(default='')
    
    _template = """
    <label id="text-field" class="mdc-text-field mdc-text-field--filled">
      <span class="mdc-text-field__ripple"></span>
      <span class="mdc-floating-label">Label</span>
      <input id="text-input" type="text" class="mdc-text-field__input" aria-labelledby="my-label" value="${value}"></input>
      <span class="mdc-line-ripple"></span>
    </label>
    """
    
    _dom_events = {'text-input': ['change']}
    
    _scripts = {
        'render': "mdc.textField.MDCTextField.attachTo(text_field);"
    }
    
class MaterialSlider(MaterialBase):
    
    end = param.Number(default=100)
    
    start = param.Number(default=0)
    
    value = param.Number(default=50)
    
    _template = """
    <div id="mdc-slider" class="mdc-slider" style="width: ${model.width}px">
      <input id="slider-input" class="mdc-slider__input" min="${start}" max="${end}" value="${value}">
      </input>
      <div class="mdc-slider__track">
        <div class="mdc-slider__track--inactive"></div>
        <div class="mdc-slider__track--active">
          <div class="mdc-slider__track--active_fill"></div>
        </div>
      </div>
      <div class="mdc-slider__thumb">
        <div class="mdc-slider__thumb-knob"></div>
      </div>
    </div>
    """
    
    _scripts = {        
        'render': """
            slider_input.setAttribute('value', data.value)
            state.slider = mdc.slider.MDCSlider.attachTo(mdc_slider)
        """,
        'value': """
            state.slider.setValue(data.value)
        """
    }
    
class MaterialSwitch(MaterialBase):
    
    label = param.String()

    value = param.Boolean(default=False)    
    
    _template = """
    <div id="mdc-switch" class="mdc-switch">
      <div class="mdc-switch__track"></div>
      <div class="mdc-switch__thumb-underlay">
        <div class="mdc-switch__thumb"></div>
        <input type="checkbox" id="basic-switch" class="mdc-switch__native-control" role="switch" aria-checked="{{ value }}"></input>
      </div>
    </div>
    <label for="basic-switch">{{ label }}</label>
    """
    
    _scripts = {
        'render': """
          state.switch = new mdc.switchControl.MDCSwitch(mdc_switch);
          state.switch.foundation.handleChange = (ev) => {
            data.value = state.switch.checked
          }
        """,
        'value': "state.switch.checked = data.value"
        
    }<jupyter_output><empty_output><jupyter_text>Examples<jupyter_code>slider     = MaterialSlider(value=5, start=0, end=100, width=200)
text_field = MaterialTextField()
switch     = MaterialSwitch(label='Toggle')

pn.Row(
    pn.Column(
        slider.controls(['value']),
        slider
    ),
    pn.Column(
        text_field.controls(['value']),
        text_field
    ),
    pn.Column(
        switch.controls(['value']),
        switch
    )
)<jupyter_output><empty_output>
{'fraction_non_alphanumeric': 0.17114427860696518, 'fraction_numerical': 0.004643449419568822, 'mean_word_length': 2.5990453460620526, 'pattern_counts': {'":': 0, '<': 47, '<?xml version=': 0, '>': 48, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'chain_length': '2', 'dir': 'jupyter-structured-clean-dedup', 'id': '183228', 'license': 'BSD-3-Clause', 'n_tokens_mistral': 1000, 'n_tokens_neox': 986, 'n_words': 135, 'path': 'examples/gallery/components/MaterialUI.ipynb', 'repo_name': 'nghenzi/panel', 'size': '3015'}