Explain how a parent component in Cycle.js integrates a child component, specifically detailing how initial properties are provided to the child and how the parent reacts to the child's output. Reference the 'Using a component' example to illustrate the data flow between the parent and the `LabeledSlider` child component.
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. Explain how the parent uses the child's output value to update its own rendering. Describe the role of `xs.combine` in integrating the child's output into the parent's virtual DOM stream.
Explain that initial properties are passed to the `LabeledSlider` via a `props$` stream (e.g., `xs.of({min: 0, max: 100, label: 'Radius'})`) provided during the child component's instantiation (`LabeledSlider({DOM, props: props$})`). Explain that the parent accesses the `LabeledSlider`'s output value through a stream, specifically `labeledSlider.value` (e.g., `const childValue$ = labeledSlider.value;`). Explain that the parent uses this `childValue$` stream to dynamically update its own virtual DOM, for example, by changing the dimensions of a rendered element (e.g., `width: value + 'px', height: value + 'px'`). State that `xs.combine` is used to merge the child's virtual DOM stream (`childVDom$`) and its output value stream (`childValue$`) into a single stream for the parent, allowing the parent's view to react to both the child's rendering and its data changes.