Ngx-Formly two inputs in one custom type

Question

Is there a way to define a custom formly type with two inputs at once without the black line coming from material.
What i need is a formly number input with a slider. The user should be able to normally type in the input and change the given value.
Something like this:

My approach:

Extending the custom component in my FormlyModule.forRoot({types:[...]}) :

{
    name: 'custom-test-input',
    component: FormlyTestInputComponent, 
    extends:'input',
}

The template:

<input matInput 
  type="number"
  [formControl]="formControl" 
/>
<mat-slider></mat-slider>

I know how to bind both values using to.bindValue(not in the sample code above) but after extending input i have this this input field line located under my whole form-field which i think is coming from mat-form-field.
Like:

Is there a way to shrink this line, put it under the input field and keep this in one custom type? Thank you for help!

Answer 1

I found a way to hide the mat-form-field-underline after having a look on the implementation.
Using the defaultOptions which can be set on a custom form in the types array to access the hideFieldUnderline attribute(boolean) was the solution.
This is how you disable the Underline on a form which extends the custom form.

types: [{ 
    name: 'custom-slider-input',
    component: FormlyCustomSliderInputComponent, 
    extends:'slider',
    defaultOptions: {
        templateOptions: {
            hideFieldUnderline: true, //is hiding underline
        },
    }
}],