Explain how to integrate a `LabeledSlider` component into a Cycle.js application. Specifically, describe how to provide initial properties to the slider, how the parent component can read the slider's current value, and how the parent's display can react dynamically to changes in the slider's value.
Navigate to the 'Guide' section of the documentation. Go to the 'Components' section. Locate and navigate to the 'Using a component' subsection. Identify the code examples and explanations demonstrating how to provide initial properties to a component like `LabeledSlider`. Find how the parent application accesses the current value emitted by the `LabeledSlider` component. Determine how the parent's virtual DOM updates its display in response to changes in the `LabeledSlider`'s value. Synthesize the findings into a concise explanation.
Explain that initial properties are provided as a stream (e.g., `props$`) when instantiating the component (e.g., `LabeledSlider({DOM, props: props$})`). Explain that the parent accesses the slider's current value through a stream property of the component's sinks (e.g., `labeledSlider.value`). Explain that the parent's display (virtual DOM) can react to the slider's value stream to dynamically update its rendering, providing an example of how the value influences a visual element (e.g., changing dimensions like `width` or `height`).