Explain how to integrate the `LabeledSlider` component into a parent `main` application in Cycle.js. Specifically, describe how to provide initial properties to the slider, how the parent accesses the slider's current value, and how the parent's display can react to changes in the slider's value.
Navigate to the 'Components' section of the guide. Navigate to the 'Using a component' subsection. Identify how initial properties are passed to the `LabeledSlider` component. Identify how the parent `main` function accesses the `LabeledSlider`'s output value. Identify how the parent uses the child's output value to update its own rendering. Synthesize the findings into a concise explanation.
Explain that initial properties are provided to the `LabeledSlider` via a `props$` stream (e.g., `xs.of({min: 0, max: 100, label: 'Radius'})`) at the time of component instantiation (`LabeledSlider({DOM, props: props$})`). Explain that the parent accesses the `LabeledSlider`'s output value through `labeledSlider.value` (a stream of the slider's current value). Explain that the parent's virtual DOM (e.g., `vdom$`) can react to the `labeledSlider.value` stream to dynamically update its rendering, such as changing the dimensions of an element (e.g., `width: value + 'px', height: value + 'px'`).