**Dash** is a powerful open-source framework that creates interactive dashboards and data applications in Python. Dash removes the complexity that goes into developing data applications and enables us to create quality products without having to get familiar with web development. 

The core components that comprise the Dash framework are the following.
- **Flask:** back-end server.
- **Plotly:** library used to display data visualizations.
- **React:** front-end server.

# 
## Main packages of Dash
It is a common misconception that the Dash framework comprises a single extensive library. On the contrary, it is made up of small packages combined together, each catering to a specific area of app development.

The following are some of the most utilized packages of the Dash framework. We will use them to create our simple app for this lesson.
- **`dash`:** This is the main library of the Dash framework that creates/initializes our app and gives it its structure.
- **`dash_html_components`:** This package provides all the available HTML tags as Python classes. It simply converts Python to HTML.
- **`dcc`:** Refers to the Dash core components. This package contains a list of dynamic components to make applications more interactive for the users. All popularly used components in Dash applications, such as Drop-downs, date pickers, sliders, and many more components, are included in this package.

## The `slider` component



    dcc.Slider(min=, max=,step=,marks={})

Some of the key features of the `slider` component include the following.

- **`min`:** This value sets the lowest value available for selection on the slider.
- **`max`:** This value sets the maximum value available for selection on the slider.
- **`marks` (optional):** This parameter adds custom labels to the `slider` component.
- **`step` (optional):** This value determines the intervals between the `min` and `max` values.

## Implementation

We create a `slider` component in the following playground using the Dash framework.

import dash
from dash import html
from dash import dcc
app = dash.Dash(__name__)
app.layout = html.Div([
    html.H1("Dash's slider component"),
    dcc.Slider(0, 11,
        step=None,
        marks={
            0: '0 %',
            3: '25 %',
            5: '50 %',
            7.50: '75%',
            10: '100 %'
        },
    )
])
if __name__ == '__main__':
    app.run_server(host='0.0.0.0', port=8050)

import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


check

React

Dart

GoJS React

Typescript React

Vue.js

Let's take a look at the above code in detail.
- **Lines 1–3:** We import the required packages from the Dash framework. These packages are the same as those listed above.

- **Line 4:**  We initialize our application.

- **Lines 5–17:** These lines of code create the basic layout for our application. There is only one `html.Div` element in the application. We add an `H1` heading for the application inside the `Div` element. Finally, we create our customized `slider` component that ranges from `0`–`11`. Moreover, they also add markers to the slider as well.


- **Lines 18–19:** We run the application server to start the application. 

slider.tar.gz

How to create a slider component using Dash in Python

Dash, an open-source Python framework, simplifies creating interactive dashboards by combining Flask, Plotly, and React. Sliders use dash core components.

How to create a slider component using Dash in Python

Main packages of Dash

The slider component

Implementation

The `slider` component