Explain how to integrate a custom `LabeledSlider` component into a Cycle.js application. Describe how to set its initial configuration, how the parent application reads the slider's current value, and how the parent's display can dynamically update based on changes to 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 how initial properties are provided to the `LabeledSlider` component. Determine how the parent application accesses the current value emitted by the `LabeledSlider` component. Find out how the parent's virtual DOM updates its display in response to changes in the `LabeledSlider`'s value, including a concrete example. 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`, or the radius of a circle).